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

Question

I know I could do it with jQuery, but I want to use only javascript. 我知道我可以使用jQuery，但我只想使用javascript。

I am currently using this code ( demo ) 我目前正在使用此代码（ 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>

But the result doesn't be like I wanted, it doesn't type each letter but it type a word simultaneously. 但是结果却不像我想要的那样，它不会键入每个字母，而是同时键入一个单词。

I have also tried this javascript code 我也尝试过此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");

But it gives me the same result. 但这给了我相同的结果。

How can I make typewriter effect with javascript? 如何使用javascript使打字机生效？ Or it is impossible? 还是不可能？

Answer 1

Here's something to get you started. 这是一些可以帮助您入门的东西。 I've used recursion to save you having to manually type your big if/else and it shows you how to do the timeouts, too. 我使用了递归来节省您手动键入大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);

Demo here: 演示在这里：

http://jsfiddle.net/4c6msk8L/ http://jsfiddle.net/4c6msk8L/

Short version, out of interest (see comments): 简短版本，出于兴趣（请参阅评论）：

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

Here you go (considering you have, for example, span or div with id "tr"): 在这里（考虑到您具有id为“ tr”的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

You can also split the message into each characters and then use setTimeout with an increasing timeout in a Array.forEach callback. 您还可以将消息拆分为每个字符，然后在Array.forEach回调Array.forEach setTimeout与增加的超时一起使用。

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

Pay attention to var , which creates a local variable (hiding a variable with the same name in the outer scope). 注意var ，它创建一个局部变量（在外部作用域中隐藏一个具有相同名称的变量）。

Consider using substring instead of copy&pasting the same code. 考虑使用substring而不是复制粘贴相同的代码。 Now you have the same error in 5 places to fix. 现在，您可以在5个地方修复相同的错误。

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

问题描述

4 个解决方案

解决方案1
2 2015-03-01 11:21:15

解决方案2
2 已采纳 2015-03-01 11:21:55

解决方案3
1 2015-03-01 11:33:03

解决方案4
0 2015-03-01 11:14:59

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

问题描述

4 个解决方案

解决方案1 2 2015-03-01 11:21:15

解决方案2 2 已采纳 2015-03-01 11:21:55

解决方案3 1 2015-03-01 11:33:03

解决方案4 0 2015-03-01 11:14:59

解决方案1
2 2015-03-01 11:21:15

解决方案2
2 已采纳 2015-03-01 11:21:55

解决方案3
1 2015-03-01 11:33:03

解决方案4
0 2015-03-01 11:14:59