js實現(xiàn)時分秒倒計時

更新時間：2019年12月03日 09:35:40 作者：star...

這篇文章主要為大家詳細介紹了js實現(xiàn)時分秒倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)時分秒倒計時的具體代碼，供大家參考，具體內(nèi)容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>js時分秒毫秒倒計時</title>
</head>
<body>
<div class="active_time" id="active_time"></div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
 //js部分
 function countTime(value) {
 //獲取當(dāng)前時間
 var date = new Date();
 var now = date.getTime();

 //設(shè)置截止時間
 //在pc端瀏覽器可以這樣寫
 var endDate = new Date("2019-12-03 00:00:00");
 //移動端必須這樣寫，因為ios不支持日期中間是-鏈接，會報錯
 //var endDate = new Date("2019/7/22 00:00:00");
 var end = endDate.getTime();
 //時間差
 var differTime = end - now;
 //定義變量,h,m,s保存倒計時的時間
 var h, m, s;
 if (differTime >= 0) {
 h = Math.floor(differTime / 1000 / 60 / 60);
 m = Math.floor(differTime / 1000 / 60 % 60);
 s = Math.floor(differTime / 1000 % 60);
 h = h < 10 ? ("0" + h) : h;
 m = m < 10 ? ("0" + m) : m;
 s = s < 10 ? ("0" + s) : s;
 var timeDom = "倒計時：" + h + "小時" + m + "分" + s + "秒";
 $("#active_time").text(timeDom);
 //遞歸調(diào)用函數(shù)所以是延時器不是定時器
 setTimeout(function () {
 countTime(value)
 }, 1000);
 } else {
 var timeDom ="00小時 00分 00秒";
 $("#active_time").text(timeDom);
 }}
 countTime()
</script>
</body>
</html>

更多關(guān)于倒計時的文章請查看專題：《倒計時功能》

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

您可能感興趣的文章:

js
倒計時

相關(guān)文章

JS Array.from()將偽數(shù)組轉(zhuǎn)換成數(shù)組的方法示例
這篇文章主要介紹了JS Array.from()將偽數(shù)組轉(zhuǎn)換成數(shù)組的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03
詳解JavaScript 中 if / if...else...替換方式
這篇文章主要介紹了JavaScript 中 if / if...else...替換方式，非常不錯，這篇文章是小編給大家做的一個方法匯總，感興趣的朋友一起看看吧
2018-07-07
完美解決手機瀏覽器頂部下拉出現(xiàn)網(wǎng)頁源或刷新的問題
下面小編就為大家分享一篇完美解決手機瀏覽器頂部下拉出現(xiàn)網(wǎng)頁源或刷新的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2017-11-11
JS實現(xiàn)checkbox互斥(單選)功能示例
這篇文章主要介紹了JS實現(xiàn)checkbox互斥(單選)功能,涉及JavaScript針對頁面元素屬性的判斷及動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
2019-05-05
uniapp跨頁面?zhèn)鲄⒌膸追N方式小結(jié)
當(dāng)我們在開發(fā)Uni-app應(yīng)用時,經(jīng)常會遇到需要在不同頁面之間傳遞參數(shù)的情況,為了實現(xiàn)跨頁面?zhèn)鲄?Uni-app提供了幾種方式,所以本文小編將給大家介紹一下uniapp跨頁面?zhèn)鲄⒌膸追N方式,文中有詳細的代碼示例供大家參考,需要的朋友可以參考下
2024-01-01
javascript設(shè)計模式 – 組合模式原理與應(yīng)用實例分析
這篇文章主要介紹了javascript設(shè)計模式 – 組合模式,結(jié)合實例形式分析了javascript組合模式相關(guān)概念、原理、應(yīng)用場景及相關(guān)使用注意事項,需要的朋友可以參考下
2020-04-04
Cookie 注入是怎樣產(chǎn)生的
現(xiàn)在很多網(wǎng)站都加了防注入系統(tǒng)代碼，你輸入注入語句將無法注入~~感覺這樣的防注入系統(tǒng)不錯，但防注入系統(tǒng)沒有注意到 Cookies 的問題！所以就有了Cookies注入~~
2009-04-04
Ajax跨域?qū)崿F(xiàn)代碼(后臺jsp)
這篇文章主要介紹了Ajax跨域?qū)崿F(xiàn)代碼(后臺jsp),需要的朋友可以參考下
2017-01-01
兼容最新firefox、chrome和IE的javascript圖片預(yù)覽實現(xiàn)代碼
這篇文章主要介紹了兼容最新firefox、chrome和IE的javascript圖片預(yù)覽實現(xiàn)代碼,測試了瀏覽器firefox6、firefox12、chrome 25.0.1364.172 m、IE6-IE10 都兼容,需要的朋友可以參考下
2014-08-08
用javascript調(diào)出windows色版的代碼
用javascript調(diào)出windows色版的代碼...
2007-07-07