1

我正在制作一个番茄计时器来帮助您更好地使用 Javascript。到目前为止，我已经设法将用户的输入转换为分钟，但我似乎无法使用 console.log 创建倒数计时器。

警告：它似乎破坏了浏览器。

这是我的小提琴：http: //jsfiddle.net/tmyie/YcBh9/

Javascript：

        var doc = document,
            timer = doc.getElementsByClassName('timer')[0],
            button = doc.getElementsByTagName('button')[0];

        button.onclick = function () {
            var input = doc.getElementById('input').value;
            var speed = (input * 1000) * 60;

            for (i = speed; speed > 1; i - 1000) {

                console.log(i);
            }
        }

HTML：

<div class="timer"></div>I am going to spend
<input id="input"></input>minutes working
<button>Go!</button>
4

3 回答 3

1

不要使用for循环，setTimeout而是使用。否则，循环将阻止任何进一步的代码和用户交互，包括任何更新 UI 以显示计时器进度的尝试。试试这个：

button.onclick = function () {
    var input = doc.getElementById('input').value;
    var remaining = (input * 1000) * 60;

    function updateTimer() {
        console.log((remaining/1000) + " seconds remaining");
        remaining -= 1000;
        if(remaining > 0) setTimeout(updateTimer, 1000);
    }
    updateTimer();
}

http://jsfiddle.net/YcBh9/1/

于 2013-06-30T18:50:08.083 回答
1

您的 for 循环没有正确递减，导致无限循环。你-=不仅需要-，而且你正在检查speed你应该检查的时候i，

for (i = speed; i > 1; i -= 1000) {
于 2013-06-30T18:43:22.687 回答
1

首先，您的循环不正确。停止条件是speed > 1，但您永远不会修改speed。此外，speed - 1000, 不会做任何事情。您需要speed = speed - 1000或speed -= 1000修改speed. 我想你真正想要的是：

for(i = speed; i > 1; i -= 1000) {
    ...
}

但是，最好setInterval在这种情况下使用。您不想使用循环，因为 JavaScript 是单线程的，并且循环会锁定 UI（正如您所发现的那样）。所以你可以做这样的事情：

button.onclick = function () {
    var input = parseInt(doc.getElementById('input').value, 10);
    var speed = (input * 1000) * 60;

    var interval = setInterval(function() {
        speed -= 1000;
        console.log(speed);

        if(speed <= 1) {
            clearInterval(interval);
            console.log("All done!");
        }
    }, 1000); //poll every second.
};
于 2013-06-30T18:48:03.400 回答