数组的打字问题

时间:2018-12-29 19:50:08

标签: javascript

我正在尝试使用Windows超时功能为单词数组生成类似于动画的类型编写器。但是每次我运行代码时,它仅印出每个单词的第一个字母。 请帮助我解决错误。

INSERT INTO TESTTABLE
(ID,USERNAME,PASSWORD,NAMEEN,NAMEAR) VALUES ...
var numbers = ['lambda','sql'];

function typeWriter() {
    numbers.forEach(function(obj,index) {
        setTimeout(function(){
            var i=0;
        	  document.getElementById("demo").innerHTML ="";
            setTimeout(function(){
                document.getElementById("demo").innerHTML += (obj.charAt(i));
            i++;
            },50);
        }, 5000 * (index + 1));
    });
}

1 个答案:

答案 0 :(得分:2)

您可以尝试使用以下代码来像打字机一样进行动画处理

var strings = ['Welcome','to', 'StackOverflow'];

function typeWriter() {
    var p = document.getElementById("demo");
    var i = 0;

    p.innerHTML = '';
    strings.forEach(function(string, index) {     
        string.split("").forEach(function(char, charIndex){
            i++;
            setTimeout(function() {
                p.innerHTML += char;
            }, 50*i);
        });
        setTimeout(function() {
            p.innerHTML += ' ';
        }, 50*i);
    });
}
<h1>Typewriter</h1>

<button onclick=" typeWriter()">Click me</button>
<p id="demo"></p>