Question

所以我正在制作一个倒计时为零的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.为什么会这样？

Answer 1

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

<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>

FIDDLE

Answer 2

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

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

因此价值始终保持不变。

Answer 3

您需要将时间计数器置于window.setInterval（）函数之外。

它可以保留在ready函数内但在setInterval（）方法之外。

Answer 4

您对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/

Answer 5

<强> DEMO

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);
            }

     });

Js倒计时只倒计时一次

5 个答案: