jquery：秒表 [英] jquery: stopwatch

问题描述

我正在使用我在此处找到的秒表代码：
http://www.kellishaver.com/projects/stopwatch/

I'm using the stopwatch code I found here: http://www.kellishaver.com/projects/stopwatch/

(function($) {
    $.fn.stopwatch = function() {
        var clock = this;
        var timer = 0;

        clock.addClass('stopwatch');

        //console.log(clock);

        // This is bit messy, but IE is a crybaby and must be coddled. 
        clock.html('<div class="display"><span class="hr">00</span>:<span class="min">00</span>:<span class="sec">00</span></div>');
        clock.append('<input type="button" class="start" value="Start" />');
        clock.append('<input type="button" class="stop" value="Stop" />');
        clock.append('<input type="button" class="reset" value="Reset" />');

        //console.log(clock.html());

        // We have to do some searching, so we'll do it here, so we only have to do it once.
        var h = clock.find('.hr');
        var m = clock.find('.min');
        var s = clock.find('.sec');
        var start = clock.find('.start');
        var stop = clock.find('.stop');
        var reset = clock.find('.reset');

        stop.hide();

        start.bind('click', function() {
            timer = setInterval(do_time, 1000);
            stop.show();
            start.hide();
        });

        stop.bind('click', function() {
            clearInterval(timer);
            timer = 0;
            start.show();
            stop.hide();
        });

        reset.bind('click', function() {
            clearInterval(timer);
            timer = 0;
            h.html("00");
            m.html("00");
            s.html("00");
            stop.hide();
            start.show();
        });

        function do_time() {
            // parseInt() doesn't work here...
            hour = parseFloat(h.text());
            minute = parseFloat(m.text());
            second = parseFloat(s.text());

            second++;

            if(second > 59) {
                second = 0;
                minute = minute + 1;
            }
            if(minute > 59) {
                minute = 0;
                hour = hour + 1;
            }

            h.html("0".substring(hour >= 10) + hour);
            m.html("0".substring(minute >= 10) + minute);
            s.html("0".substring(second >= 10) + second);
        }
    };
})(jQuery);

我这样使用它：

<script type="text/javascript">
    $('#clock1').stopwatch();
</script>

它工作正常，我可以使用停止按钮停止它。但是我希望能够使用javascript以编程方式停止它。这样的事情：

It works fine and I can stop it using the stop button. However I would like to be able to stop it programatically using javascript. Something like this:

<script type="text/javascript">
    $('#clock1').stop();
</script>

我创建了停止功能，但我不能访问秒表（）中定义的计时器 var。我该怎么办？

I created the stop function but I cannot access the timer var defined in stopwatch(). How can I do it?

推荐答案

您可以在代码中添加一个小API并使用附加它$ .data ：

You can add a small API to the code and attach it using $.data:

var api = {
    stop: function() {
        stop.click(); // this should probably be improved, but you get the idea
    }
 };
 $(clock).data('stopwatch', api);

然后使用：

$('#clock1').data('stopwatch').stop();

您还可以添加重置和使用相同的逻辑启动 API的函数。这里的一件好事是，您可以在以后的咖啡休息时间内改进执行代码，而无需更改外部程序使用API​​的方式。

You can also add the reset and start functions to the API using the same logic. A good thing here is that you can improve the execution code on a coffee break later without changing the way external programs uses the API.

这篇关于jquery：秒表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！