倒数计时器刷新页面时不会重置吗？ [英] Countdown Timer that doesn't reset when you refresh the page?

问题描述

我需要有一个定时器的代码，即使你刷新页面也不会重置倒数计时器。

我在 keith wood插件中看到了示例代码，但不知道如何在 html文件中实现此功能。
这里是链接：

http://keith-wood.name/countdown.html

我希望有人能帮助我！谢谢！ ：）

我只需要小时，分钟和秒即可显示。在给定时间后，有一个提示框会显示Time is up！。这是为我们正在开发的在线考试。非常感谢！ ：）

解决方案

如果您知道用户将启用本地缓存且能够存储数据，则可以将2个值保存为 localStorage ，1代表 currentTime ，1代表 targetTime 。然后你在一个区间内比较2，如果 currentTime> targetTime ，显示您的消息。

绑定到 onbeforeunload 事件并将新的currentTime保存回 localStorage code>。这会给你持续的倒计时，你正在寻找。

这是你如何做到这一点的例子：

  var interval; 
让分钟= 1; 
 let currentTime = localStorage.getItem（'currentTime'）; 
 let targetTime = localStorage.getItem（'targetTime'）; 
 if（targetTime == null&& currentTime == null）{
 currentTime = new Date（）; 
 targetTime = new Date（currentTime.getTime（）+（minutes * 60000））; 
 localStorage.setItem（'currentTime'，currentTime）; 
 localStorage.setItem（'targetTime'，targetTime）; 
} 
 else {
 currentTime = new Date（currentTime）; 
 targetTime = new Date（targetTime）; $！
 
 
 if（！checkComplete（））{
 interval = setInterval（checkComplete，1000）; 
 
 
函数checkComplete（）{
 if（currentTime> targetTime）{
 clearInterval（interval）; 
警报（时间到了）; 
} else {
 currentTime = new Date（）; 
 document.write（
\\\
  
 
 
 document.onbeforeunload = function（）{
 localStorage.setItem（'currentTime'，currentTime）; 
} 
  

请注意，我会做一个片段，但是stackoverflow和其他在线IDE是抱怨安全漏洞。请注意，这是完全有效的，不会违反任何安全性。将它保存为 .js 并运行。

要再次启动倒计时，调用 localStorage.clear（）。

I Need to have a code for the timer that doesn't reset the countdown timer even you refresh the page.

I saw sample code at keith wood plug in, but don't know how to implement this in my html file. here's the link :

http://keith-wood.name/countdown.html

I hope somebody could help me! thanks! :)

I just need Hour, Minutes and Seconds to show. And after the Time given, there is a prompt box that will show "Time is up! " . This one is for the online exam we are developing. Thank you so Much! :)

解决方案

If you know that the user will have local cache enabled and able to store data, you could save 2 values to localStorage, 1 for the currentTime and 1 for the targetTime. Then you compare the 2 in an interval and if currentTime > targetTime, display your message.

Also bind to the onbeforeunload event and save the new currentTime back into localStorage. This will give you the persisted countdown you are seeking.

Here is an example of how you can do this:

var interval;
let minutes = 1;
let currentTime = localStorage.getItem('currentTime');
let targetTime = localStorage.getItem('targetTime');
if (targetTime == null && currentTime == null) {
  currentTime = new Date();
  targetTime = new Date(currentTime.getTime() + (minutes * 60000));
  localStorage.setItem('currentTime', currentTime);
  localStorage.setItem('targetTime', targetTime);
}
else{
  currentTime = new Date(currentTime);
  targetTime = new Date(targetTime);
}

if(!checkComplete()){
  interval = setInterval(checkComplete, 1000);
}

function checkComplete() {
  if (currentTime > targetTime) {
    clearInterval(interval);
    alert("Time is up");
  } else {
    currentTime = new Date();
    document.write(
     "\n <font color=\"white\"> Seconds Remaining:" + ((targetTime - currentTime) / 1000) + "</font>");
  }
}

document.onbeforeunload = function(){
  localStorage.setItem('currentTime', currentTime);
}

Note that I would've made a snippet however stackoverflow and other online IDE's are complaining about security breaches. Note that this is perfectly valid and does not breach any security. Save it as a .js and run.

To start the "countdown" again, invoke localStorage.clear().

这篇关于倒数计时器刷新页面时不会重置吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！