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

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

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

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

<!doctype html>
<html>

  <head>
    <meta charset="utf-8">
    <title>簡單易用的倒計時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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js
倒計時

相關(guān)文章

純javascript實現(xiàn)簡單下拉刷新功能
這篇文章主要介紹了純javascript實現(xiàn)簡單下拉刷新功能,沒有借助任何的框架，十分簡單實用，有需要的小伙伴來參考下吧。
2015-03-03
JavaScript輸入郵箱自動提示實例代碼
這篇文章主要介紹了JavaScript輸入郵箱自動提示實例代碼，有需要的朋友可以參考一下
2014-01-01
JavaScript刪除數(shù)組元素的方法
這篇文章主要介紹了JavaScript刪除數(shù)組元素的方法,實例分析了javascript中delete函數(shù)的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-03-03
layer彈出層顯示在top頂層的方法
今天小編就為大家分享一篇layer彈出層顯示在top頂層的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
JavaScript定義變量和變量優(yōu)先級問題探討
這篇文章主要介紹了JavaScript定義變量和變量優(yōu)先級的問題探討,變量的定義還有這么講究嗎,不錯,看完本文相信你會有一定的收獲,需要的朋友可以參考下
2014-10-10
Javascript實現(xiàn)前端簡單的路由實例
本文將使用javascript實現(xiàn)一個極其簡單的路由實例。WEB開發(fā)中路由概念并不陌生，我們接觸到的有前端路由和后端路由。后端路由在很多框架中是一個重要的模塊,同樣前端路由在單頁面應(yīng)用也很常見，它使得前端頁面體驗更流暢。
2016-09-09
Object.defineProperty()函數(shù)之屬性描述對象
這篇文章主要介紹了Object.defineProperty()函數(shù)之屬性描述對象，JavaScript?提供了一個內(nèi)部數(shù)據(jù)結(jié)構(gòu)，用來描述對象的屬性，控制它的行為，比如該屬性是否可寫、可遍歷等等。這個內(nèi)部數(shù)據(jù)結(jié)構(gòu)稱為:屬性描述對象
2022-09-09
$如何用JS獲取帶“\”字符串的中間值？$
如何用JS獲取帶“\”字符串的中間值？
如何用JS獲取帶“\”字符串的中間值？...
2007-02-02
讓你徹底掌握es6 Promise的八段代碼
Promise對象可以理解為一次執(zhí)行的異步操作，使用promise對象之后可以使用一種鏈式調(diào)用的方式來組織代碼；讓代碼更加的直觀，下面這篇文章主要跟大家分享了讓大家徹底掌握es6 Promise的八段代碼，需要的朋友可以參考下。
2017-07-07
JS實現(xiàn)網(wǎng)站菜單拖拽移位效果的方法
這篇文章主要介紹了JS實現(xiàn)網(wǎng)站菜單拖拽移位效果的方法,涉及JavaScript動態(tài)操作頁面元素樣式的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-09-09