Question

我是这里的新手。我知道这有类似的问题，但我仍然没有得到它。对不起。我希望得到答案。

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

Answer 1

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

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

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

刷新页面时阻止Javascript coundown计时器重置

2 个答案: