js+html5實現(xiàn)頁面可刷新的倒計時效果

這篇文章主要為大家詳細介紹了js+html5實現(xiàn)頁面可刷新的倒計時效果，代碼較為詳細，文章整體比較簡潔，容易學習，非常適合初學者入門。

成都創(chuàng)新互聯(lián)-專業(yè)網站定制、快速模板網站建設、高性價比臨澧網站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式臨澧網站制作公司更省心,省錢,快速模板網站建設找我們，業(yè)務覆蓋臨澧地區(qū)。費用合理售后完善，10年實體公司更值得信賴。

寫了一個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('start', new Date().getTime());
      countDown(localStorage.getItem('start'));

      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;
          $('#time').html(countDown);

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

  </body>

</html>

以上就是js+html5實現(xiàn)頁面可刷新的倒計時效果的具體操作，代碼應該是足夠清楚的，而且我也相信有相當?shù)囊恍├涌赡苁俏覀內粘９ぷ骺赡軙姷玫降摹Ｍㄟ^這篇文章，希望你能收獲更多。

分享名稱：js+html5實現(xiàn)頁面可刷新的倒計時效果
當前網址：http://www.rwnh.cn/article26/jdcojg.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供建站公司、手機網站建設、搜索引擎優(yōu)化、電子商務、網站設計、微信小程序

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

js+html5實現(xiàn)頁面可刷新的倒計時效果