刷新浏览器时如何使倒数计时器不重置？答案

【问题标题】：How to make countdown timer not reset when refresh the browser?刷新浏览器时如何使倒数计时器不重置？
【发布时间】：2014-04-01 17:22:29
【问题描述】：

当我刷新浏览器时，计时器会重置，那么如何让它不重置呢？这是我的代码。请检查一下。

<?php echo $waktune; ?> // You can change it into seconds

var detik = <?php echo $waktune; ?>;
if (document.images) {
    parselimit = detik
}
function begintimer() {
    if (!document.images)
        return
    if (parselimit < 12) {
        document.getElementById("servertime").style.color = "Green";
    }
    if (parselimit == 1) {
        document.getElementById("hasil").submit();
    } else {
        parselimit -= 1 curmin = Math.floor(parselimit / 60)
            cursec = parselimit % 60
        if (curmin != 0)
            curtime = curmin + ":" + cursec + ""else
            curtime = cursec + " detik"document.getElementById("servertime").innerHTML = curtime setTimeout("begintimer()", 1000)
        }
}

【问题讨论】：

标签： javascript php web timer countdown

【解决方案1】：

如何使用 JavaScript 创建倒数计时器。

var countDownDate = new Date("Jan 5, 2021 15:37:25").getTime();

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

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

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Output the result in an element with id="demo"
  document.getElementById("demo").innerHTML = hours + "h "
  + minutes + "m " + seconds + "s ";

  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);

Try it yourself

希望得到帮助。

【讨论】：

【解决方案2】：

尝试使用会话存储：

// Store
sessionStorage.setItem("key", "value");
// Retrieve
document.getElementById("result").innerHTML=sessionStorage.getItem("key");

更新

例子：

<head>

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

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

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

【讨论】：

你能告诉我我在哪里写这段代码吗？或者给我例子。对不起，我是 javascript 的新手。

【解决方案3】：

<form name="counter">
    <input type="text" size="8" name="chandresh" id="counter">
</form>

<script type="text/javascript">
function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

var cnt = 60;
function counter(){
    if(getCookie("cnt") > 0){
        cnt = getCookie("cnt");
    }
    cnt -= 1;
    document.cookie = "cnt="+ cnt;
    jQuery("#counter").val(getCookie("cnt"));

    if(cnt>0){
        setTimeout(counter,1000);
    }

}

counter();
</script>

来源：http://chandreshrana.blogspot.in/2017/01/how-to-make-counter-not-reset-on-page.html

【讨论】：

【解决方案4】：

我认为您必须在 cookie 中保存一些值，并且只有在 timer > x && cookie 已设置时才重置计时器。

在初始化时设置 cookie：

setcookie("reloaded","true");

在重新加载时设置 cookie：

setcookie("reloaded","false");

检查：

if($_COOKIE["reloaded"] == false && timer > $time) {
   /* reset timer */
}

【讨论】：

【解决方案5】：

可以使用local storage，如：

localStorage.setItem('countDownValue', curtime); // To set the value
...
curtime = localStorage.getItem('countDownValue'); // To get the value

【讨论】：

【解决方案6】：

将服务器时间存储在 cookie 中（请参阅setcookie）并加载它。不过，您需要考虑一下您希望此 cookie 保存多长时间。

【讨论】：