页面刷新时防止 Javascript 倒数计时器重置答案

【问题标题】：Prevent Javascript coundown timer reset when page is refreshed页面刷新时防止 Javascript 倒数计时器重置
【发布时间】：2016-07-25 02:57:38
【问题描述】：

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

我有一个 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>

【问题讨论】：

您需要使用 cookie/浏览器存储以使其在页面刷新后仍然存在，请参阅此以获取一些提示 stackoverflow.com/questions/37606193/…
谢谢，但您知道如何将此代码应用或合并到此示例代码答案中吗？stackoverflow.com/questions/22099714/…
我想使用本地存储，但我不知道如何使用此代码应用它。此代码将提交测验 if (count == -1) { clearInterval(counter); document.getElementById("submittime").click();返回; }

标签： javascript timer countdown

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

此方法使用 localStorage，不会在页面刷新时暂停或重置计时器。

<p id="demo"></p>

<script>
    var time = 30; // This is the time allowed
    var saved_countdown = localStorage.getItem('saved_countdown');

    if(saved_countdown == null) {
        // Set the time we're counting down to using the time allowed
        var new_countdown = new Date().getTime() + (time + 2) * 1000;

        time = new_countdown;
        localStorage.setItem('saved_countdown', new_countdown);
    } else {
        time = saved_countdown;
    }

    // Update the count down every 1 second
    var x = setInterval(() => {

        // Get today's date and time
        var now = new Date().getTime();

        // Find the distance between now and the allowed time
        var distance = time - now;

        // Time counter
        var counter = Math.floor((distance % (1000 * 60)) / 1000);

        // Output the result in an element with id="demo"
        document.getElementById("demo").innerHTML = counter + " s";
            
        // If the count down is over, write some text 
        if (counter <= 0) {
            clearInterval(x);
            localStorage.removeItem('saved_countdown');
            document.getElementById("demo").innerHTML = "EXPIRED";
        }
    }, 1000);
</script>

【讨论】：