0

我试图通过交替每个其他字符的颜色来为一些文本设置动画。我的代码正在以一种方式对其进行样式设置，但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);

}
4

3 回答 3

3

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

于 2012-04-09T06:01:38.573 回答
2

您有语法错误/错字：

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

这是一个非法分配，JavaScript 控制台会告诉你：

ReferenceError: Invalid left-hand side in assignment

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

setTimeout(animateText, 500);

这将跳过内部eval，并允许超时使用在“全局”以外的范围中定义的函数。

于 2012-04-09T05:46:21.287 回答
0

全局变量就好了

您的代码中有一个语法在这一行

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

这不是一个有效的分配

于 2012-04-09T06:07:52.233 回答