首頁 >web前端 >html教學 >js+html5實作頁面可刷新的倒數計時效果

js+html5實作頁面可刷新的倒數計時效果

不言原創: 2018-06-05 14:38:201776瀏覽

這篇文章主要為大家詳細介紹了js html5實現頁面可刷新的倒數計時效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

寫了一個5分鐘倒數計時的代碼，有的時候代碼需要刷新，然後倒數計時又從4：59開始了，我想到的一個解決辦法，就是使用緩存，將開始倒數的時間加上要倒數的5分鐘設為緩存，然後直接用這個快取時間減去當前時間，就可以一直倒數了，不管你在倒數過程中操作了什麼，時間總在變吧，哈哈，原理就是這樣嘀。

<!doctype html>
<html>

  <head>
    <meta charset="utf-8">
    <title>简单易用的倒计时js代码</title>

  </head>

  <body>
    <p id="time"></p>
    <script src="js/jquery-git.js"></script>
    <script>
      localStorage.setItem(&#39;start&#39;, new Date().getTime());
      countDown(localStorage.getItem(&#39;start&#39;));

      function countDown(startTime) {
        var time = setInterval(function() {
          var currentTime = new Date();
          var second = 59 - parseInt(((currentTime.getTime() - startTime) / 1000) % 60);
          var min = 4 - parseInt((currentTime.getTime() - startTime) / 60000);

          if(min < 10) {
            min = "0" + min;
          }
          if(second < 10) {
            second = "0" + second;
          }

          var countDown = min + ":" + second;
          $(&#39;#time&#39;).html(countDown);

          if(second == 0 && min == 0) {
            clearInterval(time);
          }
        }, 1000)
      }
    </script>

  </body>

</html>

js+html5實作頁面可刷新的倒數計時效果

相關文章