实时倒计时时钟
Live countdown clock
基本上，我正在生成一个基于计算机的测试，显然我想为考生呈现考试剩余的时间，当倒计时达到零时提交测试。
我将持续时间存储为time()在我的MySQL数据库中与测试的其他详细信息等。
我的问题是关于我的现场倒计时计时器的最佳方法。我正在努力想办法怎么做，这样如果学生点击刷新页面，时钟就不会重置。
任何信息都会有帮助。
谢谢,
我假设您将测试细节存储在数据库中(这样您就可以标记哪些问题得到了回答等)。如果您创建了一个存储testd和startTime的表，那么每次页面加载时，它都会检查测试何时启动，并根据该值
启动计时器。表id | studentId | testId | startTime
------------------------------------
1 | 1 | 1 | 1303214136
//Time left in seconds
$timeLeft = time() - $startTime;
然后将$ timleft变量传递给Javascript以启动计时器
我将调用AJAX并获得考试日期的时间戳，然后运行基于Javascript的倒计时，该倒计时采用实际时间并减去考试时间，以获得所需的时间。
基于PHP的脚本将只工作一次，因为PHP脚本运行一次，然后页面，一旦加载，它是静态的。
引用:
- jQuery.ajax () jQuery的AJAX参考
- 倒计时示例
在Javascript中你可以定义TimeOuts和Intervals。
基本上，TimeOut是在执行操作之前的倒计时:
setTimeout ( expression, timeout );
间隔是一个重复的动作:
setInterval ( expression, interval );
因此，在您的情况下，您可以设置间隔每分钟检查，与ajax调用，剩余的时间。
这篇好文章中的更多信息:http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/
您应该将时间存储在服务器上，而不依赖于客户端代码-它应该只显示时间，而不是真正控制测试持续时间。
例如，您可以将请求时间存储在会话中，然后计算当前时间和节省时间之间的差值
几天前创建了一个秒表/倒计时，在这里找到工作的例子:http://jsfiddle.net/ezmilhouse/V2S9d/
/*
JQUERY: STOPWATCH & COUNTDOWN
This is a basic stopwatch & countdown plugin to run with jquery. Start timer, pause it, stop it or reset it. Same behaviour with the countdown besides you need to input the countdown value in seconds first. At the end of the countdown a callback function is invoked.
Any questions, suggestions? marc.fuehnen(at)gmail.com
*/
$(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);
});
相关文章：
- 如何在窗体打开时从javascript倒计时计时器值中节省时间
- foreach循环中的Javascript倒计时时钟
- 代码笔倒计时时钟故障
- 精灵图像的背景位置在 IE 中不起作用，用于倒计时时钟
- Java 脚本倒计时时钟不会显示
- 倒计时时钟 (JS）
- 如何更改keith wood jQuery倒计时中的时钟文本
- 基于JavaScript的倒计时时钟问题
- JavaScript倒计时时钟未自动倒计时
- Javascript时钟集成倒计时计时器
- 基于倒计时值动画raphajs -类似于极坐标时钟
- ASP.net Javascript为gridview的每一行设置倒计时时钟计时器
- Javascript倒计时时钟
- 象棋时钟倒计时
- 倒计时时钟在GWT
- django和sql的实时倒计时时钟
- 轨道3上的倒计时时钟
- 实时倒计时时钟
- Javascript倒计时时钟与自动重启
- 动态倒计时时钟到各种日期-纯Javascript
