计时器刷新页面自动更新

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或本地存储，或使用服务器的时间。这里是使用本地存储

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>