CODEWITHSUNDEEP
javascriptphpjquery
kunal
kunal

Reputation: 4248

timer gets autorefreshed on refreshing page

Here i am facing one problem i am preparing quiz application in php i face one problem when users starts the test the timer is running properly. when user go for second question the timer starts again here is my code:-

window.onload = start();
var mins = 10;

var secs = 0;

var timer;



function start() {


    timer = setInterval(
        function() {
            update();
        }, 1000);

}



function update() {

    var timeField = document.getElementById('time');

    if (secs == 0) {

        if (mins == 0) {

            timeField.innerHTML = 'Times up!';

            clearInterval(timer);

            alert('Times up');

            return;

        }

        mins--;

        secs = 59;

    } else {

        secs--;

    }

    if (secs < 10) {

        timeField.innerHTML = 'Time left: ' + mins + ':0' + secs;

    } else {

        timeField.innerHTML = 'Time left: ' + mins + ':' + secs;

    }

}
<div id="time" > </div>

Upvotes: 1

Views: 41

Answers (1)

Arrizal Amin
Arrizal Amin

Reputation: 36

you need to store the time on cookies or localStorage, or using server time. here is the code using localStorage

  window.onload = start();
  var timer;

  function start() {
    var mins = 10;
    var secs = 0;
    var end = parseInt(localStorage.getItem('end'));
    var time;
    if (! isNaN(end)) {
      time = Math.floor((end - Date.now()) / 1000);
    } else {
      time = mins * 60 + secs
      localStorage.setItem('end', (Date.now() + (time * 1000)));
    }
    timer = setInterval(update(time), 1000);
  }

  function update(time) {
    return function() {
      var timeField = document.getElementById('time');
      if (time <= 0) {
        timeField.innerHTML = 'Times up!';
        clearInterval(timer);
        alert('Times up');
        return;
      } else {
        time--;
      }
      var mins = Math.floor(time / 60);
      var secs = time % 60;
      if (secs < 10) {
        timeField.innerHTML = 'Time left: ' + mins + ':0' + secs;
      } else {
        timeField.innerHTML = 'Time left: ' + mins + ':' + secs;
      }
    }
  }
<div id="time" > </div>

Upvotes: 1

Related Questions