现场倒计时时钟

时间:2011-04-19 11:54:38

标签: php javascript jquery clock

基本上,我正在生成一个基于计算机的测试,显然我想在考试中为考生提供时间,并在倒数到零时提交测试。

我将持续时间存储为我的MySQL数据库中的time()以及其他测试细节等。

我的问题是关于我的倒计时器的最佳方法。我正在努力弄清楚如何做到这一点,如果学生点击刷新页面,时钟就不会重置。

任何信息都会有所帮助。

感谢,

5 个答案:

答案 0 :(得分:2)

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

表格

id | studentId | testId | startTime
------------------------------------
1  | 1         | 1      | 1303214136

<强> PHP

    //Time left in seconds
    $timeLeft = time() - $startTime;

然后将$ timeLeft变量传递给Javascript以启动计时器

答案 1 :(得分:2)

我会进行一次AJAX调用并获取考试日期的时间戳,然后运行基于Javascript的倒计时,该倒计时会占用实际时间并减去考试时间以获得所需的时间。

基于PHP的脚本只能运行一次,因为PHP脚本运行一次,然后页面一旦加载,它就是静态的。

参考文献:

答案 2 :(得分:1)

在Javascript中,您可以定义TimeOutsIntervals

基本上,TimeOut是在执行操作之前的倒计时:

setTimeout ( expression, timeout );

间隔是重复的动作:

setInterval ( expression, interval );

所以,在你的情况下,你可以每隔几分钟设置一个Interval,用ajax调用来检查剩下的时间。

这篇好文章中的更多信息:http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/

答案 3 :(得分:0)

您应该将时间存储在服务器上,而不是依赖客户端代码 - 它应该只显示时间,但不能真正控制测试持续时间。

例如,您可以在会话中存储请求时间,然后计算当前时间与保存时间之间的差异。

答案 4 :(得分:0)

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

});