Question

我正在尝试使用JavaScript制作计时器。问题是，我无法让计时器在达到0时停止。我尝试使用return和if语句，但似乎没有任何工作。我是在正确的轨道上，还是有更好的方法来做到这一点？

<input type="text" id="minutes" style="width:30px;text-align:center" maxlength="2" placeholder="00">
<span>:</span>
<input type="text" id="seconds" style="width:30px;text-align:center" maxlength="2" placeholder="00">
<button onclick="timer()">Set</button>

<script>
//This prototype correctly uses the modulus function when dealing with negative numbers.
Number.prototype.mod = function (m) {
    return ((this % m) + m) % m
}

function timer() {
    var minutes = document.getElementById('minutes').value //Value of minutes box.
    var seconds = document.getElementById('seconds').value //Value of seconds box.
    var initial = seconds * 1000 //Amount of seconds (converted to milliseconds) initially set.
    var milliseconds = (minutes * 60000) + (seconds * 1000) //Total amount of milliseconds set.

    setTimeout(function () {
        alert("Time's up!")
    }, milliseconds) //Display a message when the set time is up.

    /*\Decreases the minute by one after the initially set amount of seconds have passed.
    |*|Then, clears the interval and sets a new one to decrease the minute every 60 seconds.
    \*/
    test = setInterval(function () {
        minutes--;
        document.getElementById('minutes').value = minutes;
        clearInterval(test)
        setInterval(function () {
            minutes--;
            document.getElementById('minutes').value = minutes
        }, 60000)
    }, initial)

    //Seconds are set to decrease by one every 1000 milliseconds, then be displayed in the seconds box.
    setInterval(function () {
        seconds--;
        document.getElementById('seconds').value = seconds.mod(60)
    }, 1000)
}

Answer 1

当您只需要一个时，您有四种不同的计时器功能（setTimer和两个setIntervals）。 JSFiddle

function timer() {
    var minutes = document.getElementById('minutes').value //Value of minutes box.
    var seconds = document.getElementById('seconds').value //Value of seconds box.
    var intervalTimer = setInterval(function () {
        seconds--;
        if (seconds < 0) {
            seconds = 59;
            minutes--;
        }
        document.getElementById('minutes').value = minutes;
        document.getElementById('seconds').value = seconds;
        if (minutes == 0 && seconds == 0) {
            alert("Time's up!");
            clearInterval(intervalTimer);
        }
    }, 1000);
}

一般情况下，您需要确保每个setInterval都有一个名称（var x = setInterval...）并稍后清除（clearInterval(x)）。您可以有单独的计时器（一个用于分钟，在给定的秒数后开始，然后每60秒重复一次，一个用于秒，一个用于显示消息）如果您真的想要出于某种原因，只要您清除所有倒计时到零时的间隔计时器。

然而，使用两个计时器可能有意义。即使间隔计时器中存在任何不精确的情况，这也可以确保Time的up消息真正出现在它应该的时候。

function timer() {
    var minutes = document.getElementById('minutes').value,
        seconds = document.getElementById('seconds').value,
        intervalTimer = setInterval(function () {
        seconds--;
        if (seconds < 0) {
            seconds = 59;
            minutes--;
        }
        document.getElementById('minutes').value = minutes;
        document.getElementById('seconds').value = seconds;
    }, 1000);
    setTimer(function () {
        alert("Time's up!");
        clearInterval(intervalTimer);
    }, minutes * 60000 + seconds * 1000);
}

Answer 2

我改进了斯图尔特的回答：fiddle

基本上是相同的，除了它正常工作：

function clearTimer() {
    clearInterval(intervalTimer);
}
var intervalTimer;
function timer() {
    var minutes = document.getElementById('minutes').value //Value of minutes box.
    var seconds = document.getElementById('seconds').value //Value of seconds box.
    intervalTimer = setInterval(function () {
        seconds--;
        if (seconds < 0) {
            seconds += 60;
            minutes--;
        }
        if (minutes < 0) {
            alert("Time's up!");
            clearTimer();
        } else {
            document.getElementById('minutes').value = minutes;
            document.getElementById('seconds').value = seconds;
        }
    }, 1000);
}

Answer 3

我不是一个很棒的javascript家伙，但也许这会有所帮助。我用打字稿http://www.typescriptlang.org/Playground/

制作了这个

但我会做不同的时间并使用javascript日期对象并计算差异。这是我如何开始创建时间（没有日期对象）的简单示例

的javascript

var Timer = (function () {
    function Timer(time) {
        this.accuracy = 1000;
        this.time = time;
    }
    Timer.prototype.run = function (button) {
        var _this = this;
        this.time -= 1; //this is inaccurate, for accurate time use the date objects and calculate the difference.

        //http://www.w3schools.com/js/js_obj_date.asp
        button.textContent = this.time.toString();
        if (this.time > 0) {
            setTimeout(function () {
                return _this.run(button);
            }, 1000);
        }
    };
    return Timer;
})();

var time = new Timer(10);
var button = document.createElement('button');
time.run(button);

document.body.appendChild(button);

打字稿（如果你想知道）

class Timer {
    accuracy = 1000;//update every second
    time: number;
    constructor(time: number) {
        this.time = time;
    }
    run(button: HTMLButtonElement) {
        this.time -=1;//this is inaccurate, for accurate time use the date objects and calculate the difference.
        //http://www.w3schools.com/js/js_obj_date.asp
        button.textContent = this.time.toString();
        if(this.time > 0)
        {
            setTimeout(()=> this.run(button),1000);
        }
    }
}

var time = new Timer(10)
var button = document.createElement('button');
time.run(button);

document.body.appendChild(button);

如何使这个JavaScript Timer功能正常？

3 个答案: