快捷導(dǎo)航

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

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

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

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

<!doctype html>
<html>

  <head>
    <meta charset="utf-8">
    <title>簡(jiǎn)單易用的倒計(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>

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

您可能感興趣的文章:

相關(guān)文章

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