Javascript 如何在浏览器关闭后激活每个互动程序中的时间功能并继续计时?

Javascript 如何在浏览器关闭后激活每个互动程序中的时间功能并继续计时?,javascript,jquery,timer,Javascript,Jquery,Timer,我想使用html multiple div显示计时器。我可以为第一个div加载计时器,但我只希望我的计时器位于我单击的那个div上。对于第一个div,它工作正常,但其他div无法启动计时器。当浏览器刷新或关闭时,计时器也会停止。当其他div刷新或关闭浏览器时,我想继续计时。我给出的代码如下: (function($){ var row =document.getElementById('row').value; //alert("I am testing"+row

我想使用html multiple div显示计时器。我可以为第一个div加载计时器,但我只希望我的计时器位于我单击的那个div上。对于第一个div,它工作正常,但其他div无法启动计时器。当浏览器刷新或关闭时,计时器也会停止。当其他div刷新或关闭浏览器时,我想继续计时。我给出的代码如下:

(function($){
        var row =document.getElementById('row').value;
        //alert("I am testing"+row);
        $.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

                        //alert("I am testing"+row);
                        $('#' + $.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');
        });  
我的html代码如下所示:

 <li  id='sw_start'>
    <div>
        <span id="sw_h">00</span>:
        <span id="sw_m">00</span>:
        <span id="sw_s">00</span>:
        <span id="sw_ms">00</span>
    </div>
 </li>

 <li  id='sw_start'>
    <div>
        <span id="sw_h">00</span>:
        <span id="sw_m">00</span>:
        <span id="sw_s">00</span>:
        <span id="sw_ms">00</span>
    </div>
 </li>

如果浏览器已刷新或关闭,则无法继续计时。Javascript仅在当前窗口中运行。为了做到这一点,你需要在服务器上进行某种后端处理,可能通过AJAX调用访问。你能告诉我一些想法吗?我一直在解决这个问题@-CfreakDo你知道像PHP或Python这样的后端语言吗?您正在运行什么类型的服务器?下面是一个AJAX教程: