javascript - 防止页面刷新时 Javascript 倒数计时器重置

标签 javascript timer countdown

我是这里的新手。我知道有类似的问题,但我仍然不明白。对此感到抱歉。我希望得到这个问题的答案。

我有一个 30 秒倒计时器。如何防止其重置?

这是代码:

<html>
<body>

<div id="timer"></div> 


<script>

    var count = 1801; // 30 seconds
    var counter = setInterval(timer, 1000); //1000 will  run it every 1 second

    function timer() {
        count = count - 1;
        if (count == -1) {
            clearInterval(counter);
            document.getElementById("submittime").click();
            return;
        }

        var secondcount = count;
        var seconds = count % 60;
        var minutes = Math.floor(count / 60);
        var hours = Math.floor(minutes / 60);
        minutes %= 60;
        hours %= 60;

        document.getElementById("timer").innerHTML = hours + ":" + minutes + ":" + seconds;



    }

    </script>

</body>
</html>

我想使用上面的代码并将其合并到此。 目前这段代码是一个从 0 到 10 的计时器,并且不会被浏览器刷新。我不知道如何处理小时、分钟、秒。

<body>
    <div id="divCounter"></div>
    <script type="text/javascript">
    if(localStorage.getItem("counter")){
      if(localStorage.getItem("counter") >= 10){
        var value = 0;
      }else{
        var value = localStorage.getItem("counter");
      }
    }else{
      var value = 0;
    }
    document.getElementById('divCounter').innerHTML = value;

    var counter = function (){
      if(value >= 10){
        localStorage.setItem("counter", 0);
        value = 0;
      }else{
        value = parseInt(value)+1;
        localStorage.setItem("counter", value);
      }
      document.getElementById('divCounter').innerHTML = value;
    };

    var interval = setInterval(function (){counter();}, 1000);
  </script>
</body>

最佳答案

通常,当页面重新加载时,客户端 JavaScript 也会重新加载。这就是它的工作原理。据我所知,最好的方法是,

将倒计时值存储在 Cookie 或本地存储中,并在页面加载时从该值继续。

关于javascript - 防止页面刷新时 Javascript 倒数计时器重置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38559078/

相关文章:

android - 计时器:我想让一个按钮重置为 "00.00"而不是重启计时器

c# - 我如何从代码隐藏中刷新 asp 页面? C#

Python:如何倒计时一个数字,并将倒计时 append 到列表中

jquery - 新手使用jquery,倒计时小部件不起作用,有人可以帮忙吗?

Javascript:将字符串解析为日期作为本地时区

javascript - angularjs 延迟 promise 不延迟

javascript - morris.js 的对数 y 轴

android - Android 中的倒计时器

python - 基本的 Tkinter 倒数计时器

javascript - javascript 对象可以覆盖其父方法并在该方法中调用它吗?