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

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

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

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

<!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)頁面可刷新的倒計時效果的具體操作，代碼應(yīng)該是足夠清楚的，而且我也相信有相當(dāng)?shù)囊恍├涌赡苁俏覀內(nèi)粘９ぷ骺赡軙姷玫降?。通過這篇文章，希望你能收獲更多。

分享名稱：js+html5實現(xiàn)頁面可刷新的倒計時效果
當(dāng)前網(wǎng)址：http://bm7419.com/article26/jdcojg.html

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

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

猜你還喜歡下面的內(nèi)容