Question

我无法为此时钟添加停止按钮。

这是我的代码：

＆＃13;

function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById('txt').innerHTML =
    h + ":" + m + ":" + s;
    var t = setTimeout(startTime, 500);
}

function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}

＆＃13;

<body>
    <button onclick="startTime()">Start </button>
    <div id="txt">00:00:00</div>
</body>

＆＃13;

Jsfiddle

如何为此时钟添加停止按钮？

Answer 1

您必须保存变量t，以便稍后调用clearTimeout(t)。您当前代码的问题是t在startTime结束时超出了范围，您无法以任何方式将其取回。您可以使用全局变量，从t返回startTime，或将计时器的内部位置于其自己的范围内（例如，使用类）。

<强>类

http://jsfiddle.net/hUYZv/320/

function Timer() { // constructor bits here }
Timer.prototype.startTime = function() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    m = this.checkTime(m);
    s = this.checkTime(s);
    document.getElementById('txt').innerHTML =
        h + ":" + m + ":" + s;
    this.t = setTimeout(Timer.prototype.startTime.bind(this), 500);
}
Timer.prototype.checkTime = function(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}
Timer.prototype.stopTime = function() {
    clearTimeout(this.t);
}

$(document).ready(function() {
    var timer = new Timer();
    $('#start').click(function() {
        timer.startTime();
    });
    $('#stop').click(function() {
        timer.stopTime();
    });
});

<强>返回

function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById('txt').innerHTML =
    h + ":" + m + ":" + s;
    return setTimeout(startTime, 500);
}

然后您可以使用

var t = startTime(); // starts clock, keeps reference to value returned by `setTimeout`

启动时钟和

clearTimeout(t); // stops clock

停止时钟，假设你传递变量t。

<强>全球

function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById('txt').innerHTML =
    h + ":" + m + ":" + s;
    t = setTimeout(startTime, 500); // notice var keyword is gone
}

function stopTime() {
  clearTimeout(t);
}

Answer 2

我添加了一个布尔值，其中包含单击开始按钮。我用它来切换你的时钟必须打勾。

试试这个：

＆＃13;

var started = false;

function startTime() {

    started = !started
    tick();
}

function tick() {
    if (started == true) {
        var today = new Date();
        var h = today.getHours();
        var m = today.getMinutes();
        var s = today.getSeconds();
        m = checkTime(m);
        s = checkTime(s);
        document.getElementById('txt').innerHTML =
        h + ":" + m + ":" + s;
        var t = setTimeout(tick, 500);
    }
}

function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}

＆＃13;

<body>
    <button onclick="startTime()">Start </button>
    <div id="txt">00:00:00</div>
</body>

＆＃13;

Answer 3

检查此工作代码http://jsfiddle.net/hUYZv/1/

您的错误可能是错误使用setTimeout函数，我想是的。

var t = setInterval(setTheTime,1000);

如何为此时钟添加停止按钮？

3 个答案: