jquery - 使用 jQuery 启动-停止-重置简单计时器

Question

我有一个看起来像这样的代码

JS

var counter = 0;
var timer = setInterval("tictac()", 1000);

function tictac(){
    counter++;
    $("#clock").html(counter);
}

HTML

<div id="clock">0</div>
<div id="buttons" class="clear">
    <button id="start">start</button>
    <button id="stop">stop</button>
    <button id="reset">reset</button>
</div>

如何使用按钮控制计时器，按下开始按钮时开始计数，按下停止按钮时停止计数，按下复位按钮时重置计数器。

有人可以帮忙吗？

我设法做到了

        $(document).ready(function($) {

            var timer = undefined;
            $('#start').on('click', function(){
                timer = window.setInterval('tictac()', 1000);
            });
            $('#pause').on('click', function(){
                window.clearInterval(timer);
            });
            $('#reset').on('click', function(){
                timer = window.clearInterval(timer);
            });

        });

        var counter = 0;
        function tictac(){
            counter++;
            $("#clock").html(counter);
        }

开始和停止按钮可以工作，但重置不起作用，有人可以检查代码有什么问题吗？请漂亮

Answer 1

试试http://jsfiddle.net/vishalgupta358/DkTWN/

var counter = 0;
var timer = null;

function tictac(){
    counter++;
    $("#clock").html(counter);
}

function reset()
{
clearInterval(timer);
    counter=0;
}
function startInterval()
{
timer= setInterval("tictac()", 1000);
}
function stopInterval()
{
    clearInterval(timer);
}

Answer 2

确定了解决方案

$('#reset').on('click', function(){
    counter = -1;
    tictac();
    window.clearInterval(timer);
});

Answer 3

您可以使用onclick您的按钮。例如：<button onclick="tictac()">。如需进一步说明，您可以查看此链接。有一个演示可以解决您的问题。此外，您还可以查看源代码。