Question

  function countdown() {
        var secs = 60;
        function timer() {
            var counter = document.getElementById("counter");
            secs--;
            counter.innerHTML = "0:" + (secs< 10 ? "0" : "") + String(secs);
            if( secs > 0 ) {
                setTimeout(timer, 1000);
            } else {
                alert("Game over, you did not get to finish the game on time :( ");
                document.getElementById('memory_board').innerHTML = "";
                        newBoard();
            }
        }
        timer();
    }

    countdown();

如何将此代码放在循环中？它基本上是一个从60开始并在0结束的计时器，当发生这种情况时，游戏重新开始。我对游戏重启没有任何问题，但我不知道如何将这段代码放在循环上。我已经查看了codeacademy，它说我需要使用循环

for (var x; y;z ) {
    //code
}

其中x是起点y是它结束的地方，z是它是如何变化的。请帮我解决这个问题，我有点困惑。

Answer 1

您可能希望了解使用setInterval。它每n毫秒调用一个给定的函数。您可以像这样构建倒计时功能：

function countdown(seconds) {
    var interval = setInterval(function() {
        if (seconds < 0) clearInterval(interval); //break the interval
        seconds--;
        //code
    }, 1000); //time in millaseconds to wait
}

Answer 2

您只需将此代码放在html文件中引用的javascript文件中即可。或者您可以将此javascript代码包装在<script> </script>标记中。这应该会在您加载网页时运行代码。

如果您尝试使函数countdown()基于时间循环运行，您还可以尝试setInterval(countdown(), time_in_milliseconds);

setInterval将每隔x毫秒运行传入的函数。

Answer 3

这将做你想做的事：DEMO

   setInterval(function() {
    countdown();
    },60000);

function countdown() {
        var secs = 60;
        function timer() {
            var counter = document.getElementById("counter");
            secs--;
            counter.innerHTML = "0:" + (secs< 10 ? "0" : "") + String(secs);
            if( secs > 0 ) {
                setTimeout(timer, 1000);
            } else {
                alert("Game over, you did not get to finish the game on time :( ");
                document.getElementById('memory_board').innerHTML = "";
                        newBoard();
            }
        }
        timer();
    }

    countdown();

Answer 4

首先，不要在javascript中使用反基数倒计时，因为 setTimeout（foo，1000）并不像你想象的那么准确。仅供参考：http://ejohn.org/blog/how-javascript-timers-work/

修改您的代码以便它可以正确倒计时，请尝试以下方法：

function countdown() {
    var secs = 60,
        startTime = new Date().getTime(), // <-- new here
        endTime = startTime + secs * 1000; // <-- new here
    function timer() {
        var counter = document.getElementById("counter");
        secs = Math.floor((endTime - new Date().getTime())/1000); // <-- modify here
        counter.innerHTML = "0:" + (secs< 10 ? "0" : "") + String(secs);
        if( secs > 0 ) {
            setTimeout(timer, 1000);
        } else {
            alert("Game over, you did not get to finish the game on time :( ");
            document.getElementById('memory_board').innerHTML = "";
                    newBoard();
        }
    }
    timer();
}

countdown();

要将此代码放在循环中，将它作为对象包装并传递给您可能会很好倒计时结束后想做的事。

function newCounter(_secs, _callback) {
    var executeWhenEnd = _callback,
        secs = _secs;
    function countdown() {
        var startTime = new Date().getTime(), // <-- new here
            endTime = startTime + secs * 1000; // <-- new here
        function timer() {
            var counter = document.getElementById("counter");
            secs = Math.floor((endTime - new Date().getTime())/1000); // <-- modify here
            counter.innerHTML = "0:" + (secs< 10 ? "0" : "") + String(secs);
            if( secs > 0 ) {
                setTimeout(timer, 1000);
            } else {
                callback();
            }
        }
        timer();
    }
    return {
        countdown: countdown
        };
}

所以每次你想要一个计数器，你都可以得到一个新的计数器并开始倒计时无论你什么时候想要。例如：

var counter1 = newCounter(60, function(){
         //fire after 60 seconds
         alert("Game over, you did not get to finish the game on time :( ");
         document.getElementById('memory_board').innerHTML = "";
         newBoard();
    }),
    counter2 = newCounter(5, function() {
        //fire after 5 seconds.
    });
counter1.countdown(); // start countdown
counter2.countdown(); // start countdown

希望它有所帮助。

如何把这个计时器放在循环中？ JS

4 个答案: