快捷導(dǎo)航

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

更新時(shí)間：2017年07月15日 15:12:37 作者：ouqi_qiou

這篇文章主要為大家詳細(xì)介紹了js+html5實(shí)現(xiàn)頁面可刷新的倒計(jì)時(shí)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

<!doctype html>
<html>

  <head>
    <meta charset="utf-8">
    <title>簡單易用的倒計(jì)時(shí)js代碼</title>

  </head>

  <body>
    <div id="time"></div>
    <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>

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

uniapp?使用自定義插槽?slot的基本步驟
在 uni-app 中使用自定義插槽（slots）可以讓開發(fā)者在封裝的組件內(nèi)部定義可替換內(nèi)容區(qū)域，從而實(shí)現(xiàn)高度定制化的組件復(fù)用，以下是如何在 uni-app 中使用自定義插槽的基本步驟,需要的朋友可以參考下
2024-04-04
小程序?qū)崿F(xiàn)背景音樂播放和暫停
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)背景音樂播放和暫停，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-06-06
淺談JS繼承_借用構(gòu)造函數(shù) & 組合式繼承
下面小編就為大家?guī)硪黄獪\談JS繼承_借用構(gòu)造函數(shù) & 組合式繼承。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-08-08
基于canvas粒子系統(tǒng)的構(gòu)建詳解
下面小編就為大家?guī)硪黄赾anvas粒子系統(tǒng)的構(gòu)建詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08
js判斷undefined類型,undefined,null, 的區(qū)別詳細(xì)解析
本篇文章主要是對(duì)js判斷undefined類型,undefined,null,NaN的區(qū)別進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2013-12-12
JavaScript 拖拉縮放效果
拖拉縮放效果，實(shí)現(xiàn)通過鼠標(biāo)拖動(dòng)來調(diào)整層的面積（寬高）大小。例如選框效果。
2008-12-12
JavaScript?賦值,淺復(fù)制和深復(fù)制的區(qū)別
這篇文章主要介紹了JavaScript?賦值,淺復(fù)制和深復(fù)制的區(qū)別，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-05-05
JS實(shí)現(xiàn)帶動(dòng)畫的回到頂部效果
這篇文章主要為大家詳細(xì) 介紹了JS實(shí)現(xiàn)帶動(dòng)畫的回到頂部效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-12-12
javascript 星級(jí)評(píng)分效果(手寫)
今天上午抽空隨手寫了個(gè)星級(jí)評(píng)分的效果，給大家分享下。由于水平有限，如有問題請(qǐng)指出;首先要準(zhǔn)備一張星星的圖片，灰色是默認(rèn)狀態(tài)，黃色是選擇狀態(tài)，需要的朋友可以參考下
2012-12-12
javascript判斷機(jī)器是否聯(lián)網(wǎng)的2種方法
只有機(jī)器已經(jīng)聯(lián)網(wǎng)以后，web應(yīng)用才能啟動(dòng)，下面使用javascript判斷機(jī)器是否聯(lián)網(wǎng)，具體判斷代碼如下，有此需求的朋友可以參考下
2013-08-08