【问题标题】:Countdown function isn't actually counting down倒计时功能实际上并没有倒计时
【发布时间】:2014-09-13 00:15:12
【问题描述】:
  1. 我的 .js 文件中有一个函数应该显示从 10 到 0 的倒计时。一旦达到 0,它应该打开第二页。我还没有编写打开页面的部分,但这不是我当前的问题。我的问题是倒计时会显示数字 1,并且什么也不做。我不太确定为什么。

  2. 这是倒计时功能

    function startCountdown() {
        for (var i = 10; i >= 0; i--) { 
            document.getElementById("countdown").value = i;
        }
    }
    
  3. 这是调用它的函数

    function startAdPage() {
        setInterval(changeAd(), 2000);
        setInterval(startCountdown(), 1000);
    }
    
  4. 最后,这是它要发送到的 HTML 代码。一切都是由body标签调用onload方法开始的。我知道那部分是有效的,因为我让它在做其他工作正常的事情。

    <div id="counter">
        <p>The Central Valley Realtors home page will display in 
        <input type="text" value="" class="countdown"/>
        seconds</p>
    </div>
    

【问题讨论】:

  • 执行速度足够快,您可以看到,在循环中放置一个警告框,您会看到它弹出预期值。

标签: javascript html function counter


【解决方案1】:

setInterval 的第一个参数是一个函数。您不是在传递函数,而是在调用函数并传递它返回的任何内容,因为函数名称后面有 ()

此外,您无需在倒计时字段的更新之间等待。 Javascript 是单线程的,在脚本返回之前页面不会更新。你需要这个:

function startAdPage(){
    var curCounter = 10;
    function startCountdown() {
        document.getElementById("countdown").value = curCounter;
        curCounter--;
        if (curCounter == 0) {
            clearInterval(countdownInterval);
        }
    }
    setInterval(changeAd, 2000);
    var countdownInterval = setInterval(startCountdown, 1000);

}

【讨论】:

  • 由于某种原因,倒计时中的文本加载为 1 并且永远不会改变
  • 我刚试了一下,我遇到的唯一问题是你在输入字段中没有id="countdown"
【解决方案2】:

startCountdown 内的循环一直运行到循环结束,因此值最终为 0。此外,您应该将匿名函数或未执行函数传递给 setInterval 和 @ 987654323@ 不带参数。当您在函数名称末尾添加() 时,您正在执行该函数。将&lt;input type='text' class='countdown' /&gt; 更改为&lt;input type='text' id='countdown' /&gt;,然后尝试以下操作:

function countdown(begin, end, interval, outputElement){
  var repeat = setInterval(function(){
    if(outputElement.innerHTML){
      outputElement.innerHTML = begin--;
    }
    else{
      outputElement.value = begin--;
    }  
    if(begin === end)clearInterval(repeat);
  }, interval);
}
countdown(10, 0, 1000, document.getElementById('countdown'));

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-05-26
    • 2020-11-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-01-09
    • 1970-01-01
    相关资源
    最近更新 更多