javascript - How to make time counter will continue even refresh or leave the page -




i implemented timer count on examination page. edmodo website. when you're taking exam in edmodo, if refresh it, timer still counting. on site, if refresh page, timer refresh too. want edmodo still counting refresh page. please see code reference.

note: i'm using laravel5.1/jquery

$(document).ready(function() {      // quiz timer (start of quiz)    var quiz_timer = $('.quiz-timer').html();    var exact_time = parseint($('.timer-value').html() - 1);      var hrs_to_spend = parseint(exact_time / 60);    var mins_to_spend = parseint(exact_time % 60);    var secs_to_spend = 60;      var timeisup = false;    var secs = 0,      mins = 0,      hrs = 0;    var secs_zero, mins_zero, hrs_zero, h_spend_zero, m_spend_zero, s_spend_zero;      var setters = setinterval(function() {        if ($('.quiz-timer').html() != '00:00:01') {        if (secs_to_spend > 0) {          secs_to_spend--;        }          if (secs_to_spend <= 0) {          mins_to_spend--;          secs_to_spend = 59;        }          if (mins_to_spend < 0) {          hrs_to_spend--;          mins_to_spend = 59;        }      } else {        $('.quiz-timer').html('00:00:00')        clearinterval(setters);        $('.answer-quiz > .panel-info').attr('class', 'panel panel-danger');        swal({          title: "oops!",          text: "time up.",          type: "warning"        });          timeisup = true;        settimeout(function() {          $('#submitattempt').click();        }, 2000);        return false;      }        h_spend_zero = (hrs_to_spend < 10) ? '0' : '';      m_spend_zero = (mins_to_spend < 10) ? '0' : '';      s_spend_zero = (secs_to_spend < 10) ? '0' : '';        $('.quiz-timer').html(h_spend_zero + hrs_to_spend + ':' + m_spend_zero + mins_to_spend + ':' + s_spend_zero + secs_to_spend);        if (!timeisup) {        secs++;        if (secs == 60) {          mins++;          secs = 0;        }          if (mins == 60) {          hrs++;          mins = 0;        }          hrs_zero = (hrs < 10) ? '0' : '';        mins_zero = (mins < 10) ? '0' : '';        secs_zero = (secs < 10) ? '0' : '';          $('#timetaken').val(hrs_zero + hrs + ':' + mins_zero + mins + ':' + secs_zero + secs);      }      }, 1000);    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    original value: <span class="timer-value">110</span><br><br>  timer: <span class="quiz-timer"></span><br>  time spent: <input type="text" name="time_taken" id="timetaken" value="">

set time expiration deadline date-time. count remaining time, not spent time.

for example if date-time "2017-08-22 08:00:01" (the starting time of exam), , want expiration after 1 hour, set date-time deadline "2017-08-22 09:00:01" (this should returned server). let javascript counter recalculate difference between time , deadline refresh rate (interval) every second.





wiki

Comments

Popular posts from this blog

elasticsearch - what is the equivalent data type for geo_point in hibernate search? -

firebase - How to wait value in Ionic 2 -

Jenkins: find build number for git commit -