计时器在刷新页面上自动刷新

Question

这里我面临的一个问题是我在php中准备测验应用程序 当用户开始测试计时器正常运行时，我遇到一个问题。当用户第二个问题时，计时器再次启动 这是我的代码： -

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>

Answer 1

您需要将时间存储在cookie或localStorage上，或使用服务器时间。这是使用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>