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()">。有关进一步说明，您可以看到此link。有一个解决您的问题的演示。此外，您还可以查看源代码。

使用jQuery的start-stop-reset简单计时器

3 个答案: