Php 实时倒计时钟
基本上，我正在生成一个基于计算机的测试，显然我想在考试中为考生呈现时间限制，当倒计时达到零时，提交测试 我将持续时间作为时间存储在MySQL数据库中，以及测试的其他细节等 我的问题是关于我的实时倒计时计时器的最佳方法。我正在努力想办法，如果学生点击刷新页面，时钟就不会重置 任何信息都会有帮助Php 实时倒计时钟,php,javascript,jquery,clock,Php,Javascript,Jquery,Clock,基本上，我正在生成一个基于计算机的测试，显然我想在考试中为考生呈现时间限制，当倒计时达到零时，提交测试 我将持续时间作为时间存储在MySQL数据库中，以及测试的其他细节等 我的问题是关于我的实时倒计时计时器的最佳方法。我正在努力想办法，如果学生点击刷新页面，时钟就不会重置 任何信息都会有帮助 谢谢，我假设您将测试详细信息存储在数据库中，以便您可以标记回答了哪些问题等。 如果您创建了一个存储testID和startTime的表，那么每次加载页面时，它都会检查测试何时启动，并根据该值启动计时器 桌子
谢谢，我假设您将测试详细信息存储在数据库中，以便您可以标记回答了哪些问题等。 如果您创建了一个存储testID和startTime的表，那么每次加载页面时，它都会检查测试何时启动，并根据该值启动计时器 桌子 PHP
然后将$timeLeft变量传递给Javascript以启动计时器，我将进行AJAX调用并获取考试日期的时间戳，然后运行基于Javascript的倒计时，该倒计时计算实际时间并减去考试时间以获得所需时间 基于PHP的脚本只工作一次，因为PHP脚本只运行一次，然后页面在加载后将保持静态 参考资料：
您应该将时间存储在服务器上，而不依赖于客户机代码-它应该只显示时间，而不是真正控制测试持续时间
例如，您可以在会话中存储请求时间，然后计算当前时间和保存时间之间的差异。在Javascript中，您可以定义超时和间隔 基本上，超时是执行操作前的倒计时：
setTimeout ( expression, timeout );
setInterval ( expression, interval );
这篇好文章中的更多信息：几天前创建了秒表/倒计时，请在此处查找工作示例：
}) PHP是强静态的。不是很有用。我会寻找一个Javascript解决方案。Javascript部分需要显示剩余的时间，但计算测试剩余时间的实际代码需要在服务器上，因此有一个关于剩余时间的准确记录。请参阅下面的@AlexAtNet答案。一个纯Javascript实现是行不通的，也是愚蠢的——没有必要让AJAX调用服务器。仅仅一次就足以检索到一个常量信息。
setTimeout ( expression, timeout );
setInterval ( expression, interval );
/*
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);