jQuery實現(xiàn)倒計時功能完整示例

更新時間：2020年06月01日 10:28:39 作者：二萌偏

這篇文章主要介紹了jQuery實現(xiàn)倒計時功能,結合完整實例形式詳細分析了jQuery倒計時功能相關實現(xiàn)技巧與操作注意事項,需要的朋友可以參考下

本文實例講述了jQuery實現(xiàn)倒計時功能。分享給大家供大家參考，具體如下：

demo代碼：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>www.dhdzp.com 時間倒計時</title>
</head>
<body>
<form id="form1" runat="server">
  <div id="show">
  </div>
</form>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
  $(function () {
    TimeDown("show", 3600000)
  });
  /*
   時間倒計時
   TimeDown.js
   */
  function TimeDown(id, value) {
 
    //倒計時的總秒數(shù)
    var totalSeconds = parseInt(value / 1000);
 
    //取模（余數(shù)）
    var modulo = totalSeconds % (60 * 60 * 24);
    //小時數(shù)
    var hours = Math.floor(modulo / (60 * 60));
    modulo = modulo % (60 * 60);
    //分鐘
    var minutes = Math.floor(modulo / 60);
    //秒
    var seconds = modulo % 60;
 
    hours = hours.toString().length == 1 ? '0' + hours : hours;
    minutes = minutes.toString().length == 1 ? '0' + minutes : minutes;
    seconds = seconds.toString().length == 1 ? '0' + seconds : seconds;
 
    //輸出到頁面
    document.getElementById(id).innerHTML = hours + ":" + minutes + ":" + seconds;
    //延遲一秒執(zhí)行自己
    if(hours == "00" && minutes == "00" && parseInt(seconds)-1<0){
 
    }else{
      setTimeout(function () {
        TimeDown(id, value-1000);
      }, 1000)
    }
 
  }
</script>
</body>
</html>

運行結果：

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

PS：這里再為大家推薦幾款時間及日期相關工具供大家參考使用：

在線秒表工具：
http://tools.jb51.net/bianmin/miaobiao

在線日期/天數(shù)計算器：
http://tools.jb51.net/jisuanqi/date_jisuanqi

在線日期天數(shù)差計算器：
http://tools.jb51.net/jisuanqi/onlinedatejsq

Unix時間戳(timestamp)轉(zhuǎn)換工具：
http://tools.jb51.net/code/unixtime

更多關于jQuery相關內(nèi)容感興趣的讀者可查看本站專題：《jQuery日期與時間操作技巧總結》、《jQuery擴展技巧總結》、《jQuery常見事件用法與技巧總結》、《jQuery常用插件及用法總結》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結》

希望本文所述對大家jQuery程序設計有所幫助。

您可能感興趣的文章:

JQUERY操作JSON實例代碼
通過這篇文章你可以得到以下收獲JQUERY操作JSON的一些實現(xiàn)方法。
2010-02-02
JQuery樣式與屬性設置方法分析
這篇文章主要介紹了JQuery樣式與屬性設置方法,結合實例形式分析了jQuery屬性的獲取與設置、以及樣式的添加與刪除相關操作技巧,需要的朋友可以參考下
2019-12-12
jquery 取字符串中數(shù)字的正則
基于jquery獲取指定樣式的參數(shù)信息。
2010-07-07
從零開始學習jQuery (四) jQuery中操作元素的屬性與樣式
本篇文章講解如何使用jQuery獲取和操作元素的屬性和CSS樣式. 其中DOM屬性和元素屬性的區(qū)分值得大家學習.
2011-02-02
jquery $.ajax入門應用二
jquery $.ajax的應用實例
2008-11-11
常用的jquery模板插件——jQuery Boilerplate介紹
Query Boilerplate是一個不錯的jQuery插件開發(fā)工具，使用這個工具可以幫助你快速的構建一個jQuery框架。這個工具提供你很多評論用以幫助你使得開發(fā)變得簡單和直接，它是個真正的面對對象的工具，你可以實現(xiàn)公開或者私有的方法或者公開或者私有的屬性。
2014-09-09
jquery canvas繪制圖片驗證碼實例
這篇文章主要為大家詳細介紹了jquery canvas繪制圖片驗證碼實例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-10-10
jQuery實現(xiàn)微信長按識別二維碼功能
這篇文章主要介紹了jQuery實現(xiàn)微信長按識別二維碼的功能，非常不錯，具有參考借鑒價值，對jquery長按識別二維碼的相關知識感興趣的朋友一起學習吧
2016-08-08
js前臺判斷開始時間是否小于結束時間
js前臺判斷開始時間是否小于結束時間,結合了jquery需要的朋友可以參考下
2012-02-02
jquery.idTabs 選項卡使用示例代碼
idTabs是基于Jquery編寫封裝的一個插件，主要用于實現(xiàn)選項卡功能，下面是它的具體使用
2014-09-09