倒计时功能实际上并没有倒计时

时间:2014-09-13 00:15:12

标签: javascript html function counter

  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代码。一切都是通过调用onload方法的body标签启动的。我知道这部分是有效的,因为我做了其他正常工作的事情。

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

2 个答案:

答案 0 :(得分:2)

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 :(得分:0)

startCountdown内的循环一直运行到循环结束,所以值最终为0.此外,你应该将一个匿名函数或一个未执行的函数传递给{{1没有参数的}和setInterval。在函数名末尾添加clearInterval时,您正在执行该函数。将()更改为<input type='text' class='countdown' />,然后尝试以下操作:

<input type='text' id='countdown' />