Question

我知道我可以用jQuery来做，但我只想使用javascript。

我目前正在使用此代码（demo）

<body onload="typeEffect();">
 <span id="typeArea"></span>
 <script>
  var textSpan = document.getElementById("typeArea");
  var letterPrint = 0;

  function effectOne()
  {
   textSpan.innerHTML = "H";
  }

  function effectTwo()
  {
   textSpan.innerHTML = "He";
  }

  function effectThree()
  {
   textSpan.innerHTML = "Hel";
  }

  function effectFour()
  {
   textSpan.innerHTML = "Hell";
  }

  function effectFive()
  {
   textSpan.innerHTML = "Hello";
  }
 </script>
</body>

但结果并不像我想要的那样，它不会键入每个字母，但会同时输入一个字。

我也试过这个javascript代码

var letterPrint =  0;

function playEffect()
{
 if (letterPrint == 0)
 {
  textSpan.innerHTML = "H";
  var letterPrint = 1;
 }
 else if (letterPrint == 1)
 {
  textSpan.innerHTML = "He";
  var letterPrint = 2;
 }
 else if (letterPrint == 2)
 {
  textSpan.innerHTML = "Hel";
  var letterPrint = 3;
 }
 else if (letterPrint == 3)
 {
  textSpan.innerHTML = "Hell";
  var letterPrint = 4;
 }
 else if (letterPrint == 4)
 {
  textSpan.innerHTML = "Hello";
  var letterPrint = 5;
 }
 else
 { 
  textSpan.innerHTML = "Hello";
 }
}

setInterval("playEffect()","1000");

但它给了我相同的结果。

如何使用javascript制作打字机效果？或者这是不可能的？

Answer 1

这是让你入门的东西。我已经使用递归来节省你必须手动输入你的大if / else，它也会告诉你如何做超时。

var message = "Hello World"

function printChar(i) {
    var output = document.getElementById("output")
    var char = message.charAt(i);
    output.innerHTML = output.innerHTML + char;
    if (i < message.length) {
        window.setTimeout(function() {
            i = i + 1;
            printChar(i);
        }, 1000)
    }
}

printChar(0);

在这里演示：

http://jsfiddle.net/4c6msk8L/

简短版本，出于兴趣（见评论）：

var m = "Hello World"
function p(i) {
    document.getElementById("output").innerHTML += m.charAt(i);
    if (i<m.length) {window.setTimeout(function() {p(++i);}, 100)}
}
p(0);

Answer 2

这里你去（例如，考虑到你有一个带有id＆＃34; tr＆＃34;的span或div）：

var word = "Hello, world!";
var i = 0;
var timer = setInterval(function(){
    document.getElementById("tr").innerHTML+=word[i];i++;if(i>word.length-1){clearInterval(timer)}
},100)

fiddle

Answer 3

您还可以将邮件拆分为每个字符，然后在setTimeout回调中使用Array.forEach并增加超时。

function type(message, id) {
    var output = document.getElementById(id), i = 0;
    message.split("").forEach(function(letter){
        setTimeout(function(){
           output.innerHTML += letter;
        }, i++ * 1000);
    });
}
type("Hello Word", "output");

DEMO

Answer 4

注意var，它会创建一个 local 变量（隐藏外部作用域中具有相同名称的变量）。

考虑使用substring而不是复制和粘贴相同的代码。现在你在5个地方修复了同样的错误。

如何用纯JavaScript制作一个简单的打字机？

4 个答案: