忽略网页刷新的循环javascript计时器

Looping javascript timer that ignores Web page refresh

本文关键字：循环 javascript 计时器 刷新 网页      更新时间：2023-09-26

显然在这方面没有经验——到目前为止，我基本上是拼凑代码的。

我有一个供潜在客户访问的演示网站——他们可以登录到仪表板，基本上把一切都搞砸，一个小时后，cron作业将恢复存储在服务器其他地方的数据库转储。

我遇到了这段代码，认为显示60-0计时器会很有用，也很周到，让访问者知道网站"重置"前多久然后从60开始。然而，在浏览器刷新时，计数器也是如此。我用CSS设计了它的样式，这样它就有了一个信息标签，整个代码块从网站的面板进入了一个HTML小部件。

我认为这可能不够复杂，无法处理浏览器刷新。有什么建议吗？

<style type="text/css">
#notice {font-size:150%; float:left; padding-right:10px;}
#time {font-size:150%;}
</style>
<script type="text/javascript">
   var m=60; /*this value may be edited to suit your requirements*/
   var s=0;
   var temp=m-1;
window.onload=function() {
   tenMinutes();
 }
function tenMinutes(){
   s--;
if(s<0) {
   s=59;
   m--;
 }
if(m==-1) {
   m=temp;
 }
if(m<10) {
   mins='0'+m;
 }
else {
   mins=m;
 }
if(s<10) {
   secs='0'+s;
 }
else {
   secs=s;
 }
   document.getElementById('time').firstChild.nodeValue=mins+':'+secs;
   cd=setTimeout('tenMinutes()',1000);
}
</script>
<div style="width:300px;">
<div id="notice">This Website will reset in:</div>
<div id="time">60:00</div></div>

由于您（显然）控制了cron作业，并说它每满一小时执行一次，因此您可以使用JavaScript来计算现在和下一个小时之间的时间差。

当然，就分/秒而言，这取决于服务器和访问者的时钟是否同步。请记住，有些时区会有半小时的偏移量等等。

如果你想更准确，你需要一些服务器端逻辑来存储下一次重置的时间/日期。

您可以在应用程序代码中的某个位置执行此操作，也可以使用cronjob将时间信息以合适的格式写入文件中。

请记住，当用户告诉浏览器重新加载网页时，这与重新启动计算机基本相同。浏览器将从头开始重新加载整个页面，这也意味着它将从头开始执行任何javascript。真的没有办法避免这种情况。

如果你想避免这种情况，你必须找到一种方法来避免浏览器重新加载javascript，或者更好的方法是，使用持久数据存储来存储数据，这些数据可以告诉浏览器在页面重新加载之前它停在了哪里（比如在重新启动之前将文件保存到磁盘，以继续上面的比喻）。

一种想法是在页面首次加载时将日期时间值持久化到cookie或返回到服务器。然后，您可以检查这个值，如果它存在，假设计时器已经启动，并测量经过了多少时间。

希望能有所帮助。

由于您的服务器时间将与cron同步，我将使用php-time（）在javascript中添加时间

正如人们所说，很明显，对分钟进行硬编码会在页面重新加载时重置计时器，并且依赖用户的系统时间是不可靠的，因为它可能与服务器不同步。

相关文章：