基于JS代碼實現(xiàn)簡單易用的倒計時 x 天 x 時 x 分 x 秒效果
更新時間：2017年07月13日 09:15:42 作者：九轉(zhuǎn)十指
這篇文章主要介紹了基于JS代碼實現(xiàn)簡單易用的倒計時 x 天 x 時 x 分 x 秒效果,需要的朋友可以參考下
廢話不多說了，直接給大家貼代碼了，具體代碼如下所示：
<script>
(function () {
var tian = document.getElementsByClassName('JS-tian')[0];
var shi = document.getElementsByClassName('JS-shi')[0];
var fen = document.getElementsByClassName('JS-fen')[0];
var miao = document.getElementsByClassName('JS-miao')[0];
var endTime = new Date('2117/07/12 23:59:59').getTime() + 1000;
var interval = null;
interval = setInterval(function () {
var syhm = endTime - Date.now(); // 剩余毫秒
if (syhm >= 0) {
tian.innerText = Math.floor(syhm / 1000 / 60 / 60 / 24);
shi.innerText = Math.floor(syhm / 1000 / 60 / 60 % 24);
fen.innerText = Math.floor(syhm / 1000 / 60 % 60);
miao.innerText = Math.floor(syhm / 1000 % 60);
} else {
clearInterval(interval);
}
}, 0);
})();
</script>
htmlDemo:
<div> 距結(jié)束還剩：<span class="JS-tian"></span>天<span class="JS-shi"></span>時<span class="JS-fen"></span>分<span class="JS-miao"></span>秒 </div>
以上所述是小編給大家介紹的基于JS代碼實現(xiàn)簡單易用的倒計時 x 天 x 時 x 分 x 秒效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
js面向?qū)ο蠓庋b級聯(lián)下拉菜單列表的實現(xiàn)步驟
這篇文章主要介紹了js面向?qū)ο蠓庋b級聯(lián)下拉菜單列表的實現(xiàn)步驟，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2021-02-02
下面小編就為大家?guī)硪黄狫S獲取IMG圖片高寬的簡單實例。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要介紹了詳解如何愉快的在微信小程序中使用SVG圖標(biāo),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
js 原生判斷內(nèi)容區(qū)域是否滾動到底部的實例代碼
下面筆者就為大家分享一篇js 原生判斷內(nèi)容區(qū)域是否滾動到底部的實例代碼，具有很好的參考價值，希望對大家有所幫助2017-11-11
這篇文章主要介紹了js多個物體運(yùn)動功能,結(jié)合實例形式分析了js實現(xiàn)多物體運(yùn)動功能的原理、實現(xiàn)技巧與相關(guān)注意事項,需要的朋友可以參考下2016-12-12
javaScript實現(xiàn)可縮放的顯示區(qū)效果代碼
這篇文章主要介紹了javaScript實現(xiàn)可縮放的顯示區(qū)效果代碼,涉及JavaScript響應(yīng)鼠標(biāo)事件動態(tài)操作頁面元素屬性的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
這篇文章主要為大家詳細(xì)介紹了layDate插件設(shè)置開始時間和結(jié)束時間，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
行為驗證碼通過用戶的操作來完成驗證,常見的行為驗證碼有拖動式和點(diǎn)觸式,下面這篇文章主要給大家介紹了關(guān)于js前端實現(xiàn)登錄拼圖驗證功能的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
javascript讀寫XML實現(xiàn)廣告輪換(兼容IE、FF)
最近更新網(wǎng)站首頁廣告，ASP.NET的廣告控件很容易實現(xiàn)這點(diǎn)，可首頁是靜態(tài)頁面，聯(lián)想廣告控件的原理決定采用javascript+xml實現(xiàn)這點(diǎn)方面配置，更新廣告時只要更新xml即可，方便了廣告輪換2013-08-08
這篇文章主要為大家詳細(xì)介紹了JavaScript事件代理和委托，感興趣的小伙伴們可以參考一下2016-04-04