1

所以我正在做一个倒计时到零的javascript倒计时，然后切换div内的文本，以便用户可以继续。这是我的代码：

<div id="top">
    You will be redirected in 10..
</div>

<script type="text/javascript">
    $(document).ready(function(){
        var timerId = 0;

            if(timerId == 0){
                timerId = window.setInterval(function() {
                    var timeCounter = 10;
                    var updateTime = parseInt(timeCounter,10) - 1;
                    $("#top").html("You will be redirected in " + updateTime + "...");

                    if(updateTime <= 0){
                        clearTimeout(timerId);
                        $("#top").html("Click to continue");
                    }
                }, 1000);
            }

     });
</script>

它有效，但只能从 10 倒数到 9。这是为什么呢？

4

5 回答 5

2

Timecounter在区间内，每次迭代将其设置为 10。要使其倒计时，您必须将 timecounter 变量移到间隔函数之外：

<div id="top">
    You will be redirected in 10..
</div>

<script type="text/javascript">
    $(document).ready(function(){
        var timeCounter = 10,
            timerId = setInterval(function() {
               $("#top").html("You will be redirected in " + ( timeCounter-- ) + "...");
                if(timeCounter <= 0){
                    clearTimeout(timerId);
                    $("#top").html("Click to continue");
                }
            }, 1000);
     });
</script>

小提琴

于 2013-01-16T08:42:34.067 回答
1

您对 timeCount 变量进行硬编码。我的解决方案：

html代码：

<div id="top">
    You will be redirected in <span id="timer">10<span>..
</div>

Javascript代码

$(document).ready(function(){
        window.setInterval(function() {
            var timeCounter = $('#timer').html();
            var updateTime = parseInt(timeCounter,10) - 1;
            $("#timer").html(updateTime);

            if(updateTime <= 0){                    
                $("#top").html("Click to continue");
            }
        }, 1000);


});

示例：http: //jsfiddle.net/ccAz6/1/

于 2013-01-16T08:49:05.037 回答
1

每次计时器经过时，它都会运行指定的回调。

在回调内部（每次都是给定函数的一个新实例），您设置timeCounter为 10。

因此，价值始终保持不变。

于 2013-01-16T08:43:52.073 回答
1

您需要将时间计数器带到 window.setInterval() 函数之外。

它可以保留在 ready 函数内部，但在 setInterval() 方法之外。

于 2013-01-16T08:45:12.167 回答
1

演示

var timerId = 0;

var timeCounter=10;

$(document).ready(function(){

            if(timerId == 0){
                timerId = window.setInterval(function() {

                    var updateTime = parseInt(timeCounter) - 1;
                    timeCounter--;

                   $("#top").html("You will be redirected in " + updateTime + "...");

                    if(updateTime <= 0){
                        clearTimeout(timerId);
                        $("#top").html("Click to continue");
                    }
                }, 1000);
            }

     });
于 2013-01-16T08:49:17.817 回答