Javascript 如何在浏览器关闭后激活每个互动程序中的时间功能并继续计时?
我想使用html multiple div显示计时器。我可以为第一个div加载计时器,但我只希望我的计时器位于我单击的那个div上。对于第一个div,它工作正常,但其他div无法启动计时器。当浏览器刷新或关闭时,计时器也会停止。当其他div刷新或关闭浏览器时,我想继续计时。我给出的代码如下: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
(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教程: