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

Question

i'm a newbie here.我是这里的新手。 I know there is similar question on this but still i don't get it.我知道有类似的问题，但我仍然不明白。 Sorry for that.对不起。 I'm hoping for an answer on this.我希望得到这个答案。

I have a 30 seconds countdown timer.我有一个 30 秒倒数计时器。 How to prevent it from resetting?如何防止它重置？

Here is the code:这是代码：

<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>

I want to use the code above and merge it to this.我想使用上面的代码并将其合并到这个。 Currently this code is a timer from 0 to 10 and not being refreshed by the browser.目前这段代码是一个从 0 到 10 的计时器，并且不会被浏览器刷新。 I dont know how to do it with hour, minute, second.我不知道如何用小时，分钟，秒来做。

<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>

Answer 1

Usually the client side javascript is reloaded when the page is reloaded.通常在重新加载页面时会重新加载客户端 javascript。 that's how it works.这就是它的工作原理。 According to my knowledge the best way is to,据我所知，最好的方法是，

Store the countdown value in a Cookie or Local Storage and on page load continue from that value.将倒计时值存储在 Cookie 或本地存储中，并在页面加载时从该值继续。

Answer 2

This approach uses localStorage and does not Pause or Reset the timer on page refresh.这种方法使用 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>

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

问题描述

2 个解决方案

解决方案1
2 2016-07-25 03:08:10

解决方案2
0 2020-07-07 15:43:04

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

问题描述

2 个解决方案

解决方案1 2 2016-07-25 03:08:10

解决方案2 0 2020-07-07 15:43:04

解决方案1
2 2016-07-25 03:08:10

解决方案2
0 2020-07-07 15:43:04