现场倒计时时钟

基本上,我正在生成一个基于计算机的测试,显然我想在考试中为考生呈现时间左移,并且倒数到零时提交测试。 我有时间存储在我的MySQL数据库中的时间()与测试等的其他细节。 我的问题是关于我的倒计时计时器的最佳方法。我正在努力研究如何做到这一点,以便如果学生点击刷新页面,时钟不会重置。 任何信息都会有帮助。 谢谢,

已邀请:

jquia

赞同来自:

在Javascript中,您可以定义TimeOutsIntervals。 基本上,TimeOut是在执行操作之前的倒计时:

setTimeout ( expression, timeout );
间隔是重复动作:
setInterval ( expression, interval );
因此,在您的情况下,您可以每隔几分钟设置一个Interval来检查,使用ajax调用,剩余时间。 这篇好文章中的更多信息:http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/

cut

赞同来自:

几天前创建了秒表/倒计时,在这里找到工作示例: 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);
});

benim

赞同来自:

我假设您将测试详细信息存储在数据库中(因此您可以标记要回答的问题等)。 如果您创建了一个存储testID和startTime的表,那么每次加载页面时都可以使用它,它会检查测试何时启动,并根据该值启动计时器 表

id | studentId | testId | startTime
------------------------------------
1  | 1         | 1      | 1303214136
PHP
    //Time left in seconds
    $timeLeft = time() - $startTime;
然后将$ timeLeft变量传递给Javascript以启动计时器

xid

赞同来自:

我会进行一次AJAX调用并获得考试日期的时间戳,然后运行基于Javascript的倒计时,该倒计时会占用实际时间并减去考试时间以获得所需的时间。 基于PHP的脚本只能运行一次,因为PHP脚本运行一次,然后页面一旦加载,它就是静态的。 参考文献:

mnam

赞同来自:

您应该将时间存储在服务器上,而不是依赖客户端代码 - 它应该只显示时间但不能真正控制测试持续时间。 例如,您可以在会话中存储请求时间,然后计算当前时间与保存时间之间的差异。

要回复问题请先登录注册