Question

我想在jquery中制作多个秒表，但问题是当我们点击相应的按钮时，我想要秒表各自的秒表太阳，并且当我们按下另一个秒表的按钮并且相应的秒表应该同时启动时应该停止请看图片以供参考，我知道问题不是那么清楚，不便之处，敬请原谅。

提前感谢。

Answer 1

试试这个：

$(document).ready(function() {

    (function($){

        $.extend({

            APP : {                

                formatTimer : function(a) {
                    if (a < 10) {
                        a = '0' + a;
                    }                              
                    return a;
                },    

                startTimer : function(dir) {

                    var a;

                    // save type
                    $.APP.dir = dir;

                    // get current date
                    $.APP.d1 = new Date();

                    switch($.APP.state) {

                        case 'pause' :

                            // resume timer
                            // get current timestamp (for calculations) and
                            // substract time difference between pause and now
                            $.APP.t1 = $.APP.d1.getTime() - $.APP.td;                            

                        break;

                        default :

                            // get current timestamp (for calculations)
                            $.APP.t1 = $.APP.d1.getTime(); 

                            // if countdown add ms based on seconds in textfield
                            if ($.APP.dir === 'cd') {
                                $.APP.t1 += parseInt($('#cd_seconds').val())*1000;
                            }    

                        break;

                    }                                   

                    // reset state
                    $.APP.state = 'alive';   
                    $('#' + $.APP.dir + '_status').html('Running');

                    // start loop
                    $.APP.loopTimer();

                },

                pauseTimer : function() {

                    // save timestamp of pause
                    $.APP.dp = new Date();
                    $.APP.tp = $.APP.dp.getTime();

                    // save elapsed time (until pause)
                    $.APP.td = $.APP.tp - $.APP.t1;

                    // change button value
                    $('#' + $.APP.dir + '_start').val('Resume');

                    // set state
                    $.APP.state = 'pause';
                    $('#' + $.APP.dir + '_status').html('Paused');

                },

                stopTimer : function() {

                    // change button value
                    $('#' + $.APP.dir + '_start').val('Restart');                    

                    // set state
                    $.APP.state = 'stop';
                    $('#' + $.APP.dir + '_status').html('Stopped');

                },

                resetTimer : function() {

                    // reset display
                    $('#' + $.APP.dir + '_ms,#' + $.APP.dir + '_s,#' + $.APP.dir + '_m,#' + $.APP.dir + '_h').html('00');                 

                    // change button value
                    $('#' + $.APP.dir + '_start').val('Start');                    

                    // set state
                    $.APP.state = 'reset';  
                    $('#' + $.APP.dir + '_status').html('Reset & Idle again');

                },

                endTimer : function(callback) {

                    // change button value
                    $('#' + $.APP.dir + '_start').val('Restart');

                    // set state
                    $.APP.state = 'end';

                    // invoke callback
                    if (typeof callback === 'function') {
                        callback();
                    }    

                },    

                loopTimer : function() {

                    var td;
                    var d2,t2;

                    var ms = 0;
                    var s  = 0;
                    var m  = 0;
                    var h  = 0;

                    if ($.APP.state === 'alive') {

                        // get current date and convert it into 
                        // timestamp for calculations
                        d2 = new Date();
                        t2 = d2.getTime();   

                        // calculate time difference between
                        // initial and current timestamp
                        if ($.APP.dir === 'sw') {
                            td = t2 - $.APP.t1;
                        // reversed if countdown
                        } else {
                            td = $.APP.t1 - t2;
                            if (td <= 0) {
                                // if time difference is 0 end countdown
                                $.APP.endTimer(function(){
                                    $.APP.resetTimer();
                                    $('#' + $.APP.dir + '_status').html('Ended & Reset');
                                });
                            }    
                        }    

                        // calculate milliseconds
                        ms = td%1000;
                        if (ms < 1) {
                            ms = 0;
                        } else {    
                            // calculate seconds
                            s = (td-ms)/1000;
                            if (s < 1) {
                                s = 0;
                            } else {
                                // calculate minutes   
                                var m = (s-(s%60))/60;
                                if (m < 1) {
                                    m = 0;
                                } else {
                                    // calculate hours
                                    var h = (m-(m%60))/60;
                                    if (h < 1) {
                                        h = 0;
                                    }                             
                                }    
                            }
                        }

                        // substract elapsed minutes & hours
                        ms = Math.round(ms/100);
                        s  = s-(m*60);
                        m  = m-(h*60);                                

                        // update display
                        $('#' + $.APP.dir + '_ms').html($.APP.formatTimer(ms));
                        $('#' + $.APP.dir + '_s').html($.APP.formatTimer(s));
                        $('#' + $.APP.dir + '_m').html($.APP.formatTimer(m));
                        $('#' + $.APP.dir + '_h').html($.APP.formatTimer(h));

                        // loop
                        $.APP.t = setTimeout($.APP.loopTimer,1);

                    } else {

                        // kill loop
                        clearTimeout($.APP.t);
                        return true;

                    }  

                }

            }    

        });

        $('#sw_start').live('click', function() {
            $.APP.startTimer('sw');
        });    

        $('#cd_start').live('click', function() {
            $.APP.startTimer('cd');
        });           

        $('#sw_stop,#cd_stop').live('click', function() {
            $.APP.stopTimer();
        });

        $('#sw_reset,#cd_reset').live('click', function() {
            $.APP.resetTimer();
        });  

        $('#sw_pause,#cd_pause').live('click', function() {
            $.APP.pauseTimer();
        });                

    })(jQuery);

});

DEMO HERE

或

$(function () { // Never assume one widget is just used once in the page. You might // think of adding a second one. So, we adjust accordingly. $('.stopwatch').each(function () { // Cache very important elements, especially the ones used always var element = $(this); var running = element.data('autostart'); var hoursElement = element.find('.hours'); var minutesElement = element.find('.minutes'); var secondsElement = element.find('.seconds'); var millisecondsElement = element.find('.milliseconds'); var toggleElement = element.find('.toggle'); var resetElement = element.find('.reset'); var pauseText = toggleElement.data('pausetext'); var resumeText = toggleElement.data('resumetext'); var startText = toggleElement.text(); // And it's better to keep the state of time in variables // than parsing them from the html. var hours, minutes, seconds, milliseconds, timer; function prependZero(time, length) { // Quick way to turn number to string is to prepend it with a string // Also, a quick way to turn floats to integers is to complement with 0 time = '' + (time | 0); // And strings have length too. Prepend 0 until right. while (time.length < length) time = '0' + time; return time; } function setStopwatch(hours, minutes, seconds, milliseconds) { // Using text(). html() will construct HTML when it finds one, overhead. hoursElement.text(prependZero(hours, 2)); minutesElement.text(prependZero(minutes, 2)); secondsElement.text(prependZero(seconds, 2)); millisecondsElement.text(prependZero(milliseconds, 3)); } // Update time in stopwatch periodically - every 25ms function runTimer() { // Using ES5 Date.now() to get current timestamp var startTime = Date.now(); var prevHours = hours; var prevMinutes = minutes; var prevSeconds = seconds; var prevMilliseconds = milliseconds; timer = setInterval(function () { var timeElapsed = Date.now() - startTime; hours = (timeElapsed / 3600000) + prevHours; minutes = ((timeElapsed / 60000) + prevMinutes) % 60; seconds = ((timeElapsed / 1000) + prevSeconds) % 60; milliseconds = (timeElapsed + prevMilliseconds) % 1000; setStopwatch(hours, minutes, seconds, milliseconds); }, 25); } // Split out timer functions into functions. // Easier to read and write down responsibilities function run() { running = true; runTimer(); toggleElement.text(pauseText); } function pause() { running = false; clearTimeout(timer); toggleElement.text(resumeText); } function reset() { running = false; pause(); hours = minutes = seconds = milliseconds = 0; setStopwatch(hours, minutes, seconds, milliseconds); toggleElement.text(startText); } // And button handlers merely call out the responsibilities toggleElement.on('click', function () { (running) ? pause() : run(); }); resetElement.on('click', function () { reset(); }); // Another advantageous thing about factoring out functions is that // They are reusable, callable elsewhere. reset(); if(running) run(); }); });

DEMO HERE

jquery

1 个答案: