javascript - 带有光标 Javascript 的自动打字机

标签 javascript css

我基本上想在 HTML 页面中创建一个简单的 Javascript 自动编写器 这是我的代码:

<html>

<head>
  <style>
    #type {
      display: inline-block;
    }
    
    #cur {
      display: inline-block;
    }
  </style>
</head>

<body>
  <pre>
<div id="type"></div><div id="cur">{cursor}</div>
</pre>
  <script>
    var string = "Write this string!\nNext Line!";
    var array = string.split("");
    var timer;

    function looper() {
      if (array.length > 0) {
        document.getElementById("type").innerHTML += array.shift();
      } else {
        clearTimeout(looper);
      }
      timer = setTimeout('looper()', 50);
    }
    looper();
  </script>
</body>

</html>

字符串“{cursor}”应该是光标位置,我稍后会创建它。 它的问题是当我换行时;本质上,光标不会返回到该行的初始位置,而是保持到它最后一次“跳转”到下一行的位置。

最佳答案

本网站可能对您有所帮助https://macarthur.me/typeit/

你可以使用 jquery 试试这个:

<p id="example3"></p> 

$('#example3').typeIt({
 strings: ["This is a great string.", "And here we have another great string.."],
 speed: 50,
 autoStart: false
});

关于javascript - 带有光标 Javascript 的自动打字机,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45383388/

相关文章:

javascript - 淡入新元素的可靠方法

javascript - 尝试使用 :not to select ids and have the respective slideshows turn off

css - JavaFX TextArea 垂直对齐

html - 把图片做成链接是行不通的

javascript - 如何将文本文件内容保存到Javascript变量?

javascript - 将 ng-repeat 中的值与 php 值进行比较

javascript - .show() 无法正常工作(没有动画,没有更多代码)

javascript - 单击按钮时 div 的动画高度

php - 在 symfony2 中使用 Bootstrap 3 表单主题什么都不做

javascript - MDN 中的 Symbol.species 示例没有意义?