Question

我试图通过交替每个其他字符的颜色来动画一些文本。我的代码正在以单向样式进行设计，但是setTimeout并没有再次调用它来替换文本颜色。

问题似乎是我使用全局变量作为计数器，这可能是我忽略的一个简单问题。

有什么想法吗？这是我的javascript代码：

var num = 0;
function animateText(){
    var str = "";
    var title = document.getElementById("title").innerHTML;

    for(var i = 0; i < title.length; i++){
        if(num % 2 == 0){
            if(i % 2 == 0){
                str += '<span style = "color: silver;">' + title.charAt(i) + '</span>';
            } else {
                str += title.charAt(i) + "";
            }
        } else {
            if(i % 2 != 0) {
                str += '<span style = "color: silver;">' + title.charAt(i) + '</span>';
            } else {
                str += title.charAt(i) = "";
            }
        }
    }

    document.getElementById("title").innerHTML = str;
    num++;

    if(num == 10) 
        num = 0;

    setTimeout("animateText()", 500);

}

Answer 1

除了乔纳森指出的错字之外，你的逻辑似乎有缺陷。第一次通过该函数，您将获得初始字符串并构建一些包含各种<span>标记的HTML。下一次通过该函数，你从DOM元素中获取innerHTML并再次开始处理它就好像它只是你的字符串一样，但这次它是之前带有所有标记的HTML - 它不是你开始使用的字符串。您需要将原始字符串保存在未修改的地方，这样您每次只能通过函数开始使用文本字符串，而不是每次都使用以前格式化的HTML构建。

Answer 2

您有语法错误/拼写错误：

str += title.charAt(i) = "";
//                     ^

这是一个非法的任务，因为JavaScript控制台会告诉你：

ReferenceError: Invalid left-hand side in assignment

但是，您也可以传递setTimeout函数引用而不是字符串：

setTimeout(animateText, 500);

这将跳过内部eval并允许超时使用除“global”之外的作用域中定义的函数。

Answer 3

全局变量很好

您的代码中有一行语法

str += title.charAt(i) = "";

这不是有效的作业

为什么这个全局计数器变量不能与setTimeout一起使用？

3 个答案: