Question

我基本上想在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}”应该是光标位置，我稍后会创建它。它的问题是当我去一个新线;本质上，光标不会返回到线上的初始位置，而是保持到最后一个位置，只是“跳转”到下一行。

Answer 1

本网站可能会帮助您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
});

自动typer与光标Javascript

1 个答案: