2015-07-13 29 views
0

我是新来的HTML和JavaScript。我找不到任何解决方案来防止页面上的计时器在页面关闭或刷新时自动重启。即使页面/浏览器关闭或刷新,多个定时器继续(在后台运行)

我希望计时器能够继续运行,即使我关闭了页面/浏览器。例如:如果定时器倒计时1小时,我激活并关闭它。 30分钟后,我重新打开页面,剩余时间应该是30分钟。

这里我的计时器代码:

function countdown(element, hours, minutes, seconds, oritime) { 
 
    var interval; 
 
    var htemp = 0; 
 
    var mtemp = 0; 
 
    interval = setInterval(function() { 
 
    var el = document.getElementById(element); 
 
    if (seconds == 0) { 
 
     if (minutes == 0) { 
 
     if (hours == 0) { 
 
      clearInterval(interval); 
 
      el.innerHTML = oritime; 
 
      return; 
 
     } else { 
 
      if (htemp == 0) { 
 
      minutes = 0; 
 
      seconds = 0; 
 
      htemp = 1; 
 
      } 
 
     } 
 
     } else { 
 
     if (mtemp == 0) { 
 
      seconds = 0; 
 
      mtemp = 1; 
 
     } 
 
     } 
 
    } 
 
    if (hours > 0) { 
 
     var hour_text = hours > 9 ? '' : '0'; 
 
    } else { 
 
     var hour_text = '0'; 
 
    } 
 
    if (minutes > 0) { 
 
     var minute_text = minutes > 9 ? '' : '0'; 
 
    } else { 
 
     var minute_text = '0'; 
 
    } 
 
    var second_text = seconds > 9 ? '' : '0'; 
 
    el.innerHTML = hour_text + hours + ' : ' + minute_text + minutes + ' : ' + second_text + seconds; 
 
    if (seconds == 0) { 
 
     if (minutes == 0) { 
 
     if (hours == 0) { 
 
      clearInterval(interval); 
 
      el.innerHTML = oritime; 
 
      return; 
 
     } else { 
 
      if (htemp == 1) { 
 
      hours--; 
 
      minutes = 59; 
 
      seconds = 60; 
 
      htemp = 0; 
 
      } 
 
     } 
 
     } else { 
 
     if (mtemp == 1) { 
 
      minutes--; 
 
      seconds = 60; 
 
      mtemp = 0; 
 
     } 
 
     } 
 
    } 
 
    seconds--; 
 
    }, 1000); 
 
}
<input type="button" onclick="countdown('timer1',0,5,0,'5');" value="Start Timer 1"> 
 
<div id='timer1' color='red'>5</div> 
 
<input type="button" onclick="countdown('timer2',0,5,0,'5');" value="Start Timer 2"> 
 
<div id='timer2' color='red'>5</div>

使用cookie将有可能解决这个问题?如果是这样,怎么样?

我没有使用PHP或AJAX或jQuery,因为我还没有知道。我没有服务器来发布HTML文件,所以我刚刚找到了一个使用谷歌驱动器发布的解决方案。

小题目,如果有人有上传HTML的任何“免费”服务器以便其他人可以通过在线访问,那就太好了。

+0

免费在沙箱中?你可以使用jsfiddle或codepen。 –

+0

“用于防止页面上的计时器” - 您是什么意思? – alan0xd7

+0

我可以看到你尝试了clearInterval,但是如果它不适合你,那是因为变量有不同的作用域,即使它们都被称为“interval”。使用document.interval代替间隔并删除它前面的“var”。document.interval不是“一件事”,但可以将任何变量附加到DOM对象。试试如果这能解决问题。 – Schien

回答

0

简答题号码。 Javascript只会在您的浏览器打开时运行,不应该用于保存任何数据。

如果你想要一个计时器,你应该使用服务器和服务器端语言如PHP来做到这一点。

编辑: 话虽如此,我发现Jqueryplugin这可能是对你有用。

+0

不是真的。您可以使用cookie存储值,并在访问者回来时重新计算计时器。但是这不会很安全,因为用户可以更改价值 –

+0

不仅用户可以更改它们,还可以删除它们等等......更不用说它不能用于不同的浏览器。 –

+0

如果使用cookie,可以向我展示关于如何存储计时器并在重新打开页面时更新计时器(而不是暂停)的示例?我访问了w3schools.com,但这个例子不适合我的情况。 –

0

你应该尝试重构你的代码了一下,如:

if (seconds === 0 && minutes === 0 && hours === 0) { 
// your else logic here... 
} 

您也可以选择使用switch如果你碰巧使用了大量的“嵌套IFS”和短路逻辑。当你进入JavaScript的世界时,你会发现很多有趣的库和框架(基本上有很多聪明的聪明人已经预先写好的很多抽象函数/方法)你)你可以用它来帮助你更快地开发功能!

由于您只将元素存储到“变量”中,因此只要本地会话处于活动状态(即关闭浏览器/会话后将清除所有存储的变量),计时器就会一直运行。

如果你想与数据库内的数据存储和实际的持久性数据多玩,你应该制定至少在“本地主机”的环境,你可以轻松设置使用“的NodeJS”的使用在https://nodejs.org/

下载

希望这有助于您的编码开发路线!

+0

有没有什么理由让你把'if(seconds && minutes && hours === 0){'而不是'if(seconds === 0 && minutes === 0 && hours === 0){'? –

+0

嘿,谢谢你的提醒,忘记了“&&”操作符具有短路性质,编辑了我的答案〜 –

相关问题