如何更改此代码以使倒计时在重新加载时不重置

How can I alter this code to make the countdown not reset on reload?

本文关键字：加载 新加载 代码 倒计时 何更改      更新时间：2023-09-26

我从这里得到了这段代码。但是，我对JS不太好，需要一点帮助才能使计时器在重新加载时不重置。另外，我希望它倒计时几天而不是小时、分钟和秒。有人可以帮我吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title></title>
<script>
/*<![CDATA[*/
function zxcCountDown(id,mess,secs,mins,hrs,days){
 var obj=document.getElementById(id);
 var oop=obj.oop
 if (!oop){
  obj.oop=new zxcCountDownOOP(obj);
 }
 obj.oop.start(mess,secs,mins,hrs,days);
}
function zxcCountDownOOP(obj,mess){
 this.obj=obj;
 this.to=null;
}
zxcCountDownOOP.prototype={
 start:function(mess,secs,mins,hrs,days){
  clearTimeout(this.to);
  this.mess=mess;
  this.mhd=[mins,hrs,days];
  var date=new Date();
  this.fin=new Date(date.getFullYear(),date.getMonth(),date.getDate()+(days||0),date.getHours()+(hrs||0),date.getMinutes()+(mins||0),date.getSeconds()+(secs||0));
  this.cng();
 },
 cng:function(){
  var now=new Date(),s=(this.fin-now)/1000+1,d=Math.floor(s/60/60/24),h=Math.floor(s/60/60-d*24),m=Math.floor(s/60-h*60-d*24*60),s=Math.floor(s-m*60-h*3600-d*24*60*60);
  if (this.fin-now>-500){
   this.obj.innerHTML=(this.mhd[2]?(d>9?d:'0'+d)+' days ':'')+(this.mhd[1]||this.mhd[2]?(h>9?h:'0'+h)+' hours ':'')+(this.mhd[0]||this.mhd[1]||this.mhd[2]?(m>9?m:'0'+m)+' minutes ':'')+(s>9?s:'0'+s)+' seconds';
   this.to=setTimeout(function(oop){ return function(){ oop.cng(); }}(this),1000);
  }
  else if (this.mess){
   this.obj.innerHTML=this.mess;
  }
 }
}
/*]]>*/
</script></head>
<body onload="zxcCountDown('tst','message',20); zxcCountDown('tst1','message 1',0,0,2,0);">
<span id="tst" ></span> <input type="button" name="" value="Re-Start" onmouseup="zxcCountDown('tst','message',20);"/>
<br />
<span id="tst1" ></span>
</body>
</html>

从技术上讲，你不能。Javascript 在加载时不维护状态。不过，有几种选择。

  1. 可以使用本地存储来保存当前计数并检索它再次在页面加载时。不过，这是一个较新的 API，不会向后兼容。http://diveintohtml5.info/storage.html
  2. 您可以将值存储在 Cookie 中，并在重新加载页面时检索 Cookie。http://www.quirksmode.org/js/cookies.html

不过，仅此而已。

JavaScript 是一个客户端脚本。每次重新加载页面时，它都会重新加载。要保留变量，您需要查看脚本之外的内容。

您是否尝试使用饼干？他们可以根据需要保存变量值。

只需在每次重新加载时从 cookie 中获取值

相关文章：