如何用纯javascript制作一台简单的打字机？

我知道我可以用jQuery实现，但我只想使用javascript

我当前正在使用此代码（）

但它给了我同样的结果

---

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

请注意

var

，它会创建一个局部变量（在外部范围中隐藏同名变量）

---

考虑使用

子字符串

，而不是复制和粘贴相同的代码。现在有5个地方有相同的错误需要修复。

请注意

var

，它会创建一个局部变量（在外部范围中隐藏一个同名的变量）

---

考虑使用

子字符串

，而不是复制和粘贴相同的代码。现在，在5个地方有相同的错误需要修复。

这里有一些东西可以帮助您开始。我已经使用递归来避免您必须手动键入big 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);

var message=“你好，世界”
函数printChar（i）{
var output=document.getElementById（“输出”）
var char=message.charAt（i）；
output.innerHTML=output.innerHTML+char；
if（i

此处演示：

---

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

var m=“你好，世界”
功能p（i）{
document.getElementById（“输出”）.innerHTML+=m.charAt（i）；
if（i这里有一些东西可以让你开始。我使用递归来避免你必须手动键入大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);

var message=“你好，世界”
函数printChar（i）{
var output=document.getElementById（“输出”）
var char=message.charAt（i）；
output.innerHTML=output.innerHTML+char；
if（i

此处演示：



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

var m=“你好，世界”
功能p（i）{
document.getElementById（“输出”）.innerHTML+=m.charAt（i）；
如果（i在这里）（考虑到您有，例如，id为“tr”的span或div）：

现在开始（例如，考虑到您有id为“tr”的span或div）：

您还可以将消息拆分为每个字符，然后在
数组中使用
setTimeout
并增加超时。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");

您还可以将消息拆分为每个字符，然后在
数组中使用
setTimeout
并增加超时。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");

“或者它不可能？”…你是认真的吗？看看（它甚至适用于真正的html，而不仅仅是纯文本内容）“或者它是不可能的？”…你是认真的吗？看看（它甚至适用于真正的html，而不仅仅是纯文本内容）为什么要向下投票…检查小提琴，它有效…而且它很短：）无法使用文档。页面加载后写入，将擦除所有其他内容out@char和投票人：好的，删除了带有文档的版本。完整地写，请不要投票否决：Dwhy downvote…检查小提琴，它有效…而且它很短：）无法使用文档。页面加载后写入，将擦除所有其他内容out@char和投票人：好的，删除了document的版本。完全写入，请不要投票否决：D这是有效的。但我决定使用nicael的代码，因为它比较短，对不起。@Anakin和rmember，越短越好。嗯，是的，我想说点什么g类似。更短通常意味着更难阅读，因此更难维护。例如，nicael当前的答案是180个字符。如果我不更改答案的实质内容，只需删除空格、缩短变量名称等，我可以将其减少到176个字符（现在将添加到答案中）.我添加此代码并不是为了让你改变主意，只是为了支持Alex关于缩短的观点并不总是更好。在这种情况下，代码在功能和结构上都是相同的，但较长的版本更容易阅读，其他人会发现它更容易维护。我只想要简单的打字机效果。这是可行的。但是我决定使用nicael的代码，因为它较短，对不起。@Anakin和R记得，较短并不总是更好。嗯，是的，我想说一些类似的话。较短通常意味着更难阅读，因此更难维护。例如，nicael当前的答案是180个字符长。如果我不更改答案的实质内容，只需删除e空格、缩短变量名等，我可以将其减少到176个字符（现在将添加到答案中）.我添加此代码并不是为了让你改变主意，只是为了支持Alex关于缩短的观点并不总是更好。在这种情况下，代码在功能和结构上都是相同的，但较长的版本更容易阅读，其他人会发现它更容易维护。我只想要简单的打字机效果。这是可行的。但是我决定使用nicael的代码，因为它更短，对不起。@Anakin我可以把它做得更短。不管怎样，这都可以。这很有效。但我决定使用nicael的代码，因为它更短，对不起。@Anakin我可以把它做得更短。不管怎样，都可以。
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)

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");