如何使用 setInterval() 更改文本？答案

【问题标题】：How can use the setInterval() to change the text?如何使用 setInterval() 更改文本？
【发布时间】：2011-05-15 08:22:59
【问题描述】：

我已经为此工作了很长时间。我正在尝试创建一个倒计时的简单计时器。我已经让 alert() 工作了，但不幸的是 textToChange 没有改变。我在下面复制了我的代码副本。任何帮助将不胜感激！谢谢。

<script type="text/javascript">
    var timeLeft = 0;
    var changingTextElement;
    var changingText = new Array();
    var ctr = 0;

    function timeMsg(thing)
    {
    var length = thing.inputbox.value*1000;
    var t = setTimeout("alertMsg()",length);
    timeLeft = length/1000;
    initChangeText();
    }

    function alertMsg()
    {
    alert("Alert!");
    }

    function initChangeText(){
        changingTextElement = document.getElementById("textToChange");
        changingText[ctr] = changingTextElement.innerHTML;
        ctr++;
        while(timeLeft > 0){
            changingText[ctr] = timeLeft;
            timeLeft--;
            ctr++;
        }
        ctr = 0;    
        setInterval("changingText()",1000);
    }

    function changingText() {
        ctr++;
        if(ctr >= changingText.length){
            changingTextElement.innerHTML = 0;
        }
        else{
            changingTextElement.innerHTML = changingText[ctr];
        }
    }

</script>

【问题讨论】：

您能否也发布您的 html 以便我们验证 id、元素等？
没有理由创建changingText 数组（它可能会变得很大）。您可以计算正确的值以即时显示...
@Thomas：不，changingTextElement 是在脚本块顶部的全局范围内定义的。如果您添加var，它将无法以任何方式工作。
@Thomas - 为什么，它们是全局定义的，所以只需要从纯粹的角度而不是从功能的角度进行更改

标签： javascript setinterval timing

【解决方案1】：

您正在使用changingText 函数和changingText 数组...

看到冲突了吗？

作为附加信息，

不要在setInterval 方法中使用字符串作为名称函数。直接使用方法的引用

setInterval(changingText, 1000);

【讨论】：

我花了太长时间才弄清楚这一点。真是浪费小提琴:(

【解决方案2】：

对于一个简单的倒计时，这段代码太大了。基本上，你应该做的是：

设置倒计时的秒数
使用setInterval 启动一个计时器，它会递减计数器并显示它

这可以很简单：

var countFrom;
var timer;
function run_timer() {
    document.getElementById("textToChange").innerHTML = --countFrom;
    // !0 evaluates to true, if the counter reaches 0 (wait 0 seconds) ...
    if (!countFrom) {
        clearInterval(timer);
        alert("Timer finished!");
    }
}
function init_timer () {
    // stop previous timers if any
    clearInterval(timer);
    // start counting from 30 seconds
    countFrom = 30;
    timer = setInterval(run_timer, 1000);
}

【讨论】：

【解决方案3】：

你的版本在小提琴中。我改了函数名

http://jsfiddle.net/mplungjan/jqeDv/

【讨论】：