基于JS代碼實現(xiàn)簡單易用的倒計時 x 天 x 時 x 分 x 秒效果
更新時間：2017年07月13日 09:15:42 作者：九轉十指
這篇文章主要介紹了基于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> 距結束還剩：<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 秒效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
js面向對象封裝級聯(lián)下拉菜單列表的實現(xiàn)步驟
這篇文章主要介紹了js面向對象封裝級聯(lián)下拉菜單列表的實現(xiàn)步驟，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2021-02-02
下面小編就為大家?guī)硪黄狫S獲取IMG圖片高寬的簡單實例。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要介紹了詳解如何愉快的在微信小程序中使用SVG圖標,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
下面筆者就為大家分享一篇js 原生判斷內容區(qū)域是否滾動到底部的實例代碼，具有很好的參考價值，希望對大家有所幫助2017-11-11
這篇文章主要介紹了js多個物體運動功能,結合實例形式分析了js實現(xiàn)多物體運動功能的原理、實現(xiàn)技巧與相關注意事項,需要的朋友可以參考下2016-12-12
javaScript實現(xiàn)可縮放的顯示區(qū)效果代碼
這篇文章主要介紹了javaScript實現(xiàn)可縮放的顯示區(qū)效果代碼,涉及JavaScript響應鼠標事件動態(tài)操作頁面元素屬性的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
這篇文章主要為大家詳細介紹了layDate插件設置開始時間和結束時間，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
行為驗證碼通過用戶的操作來完成驗證,常見的行為驗證碼有拖動式和點觸式,下面這篇文章主要給大家介紹了關于js前端實現(xiàn)登錄拼圖驗證功能的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02
javascript讀寫XML實現(xiàn)廣告輪換(兼容IE、FF)
最近更新網站首頁廣告，ASP.NET的廣告控件很容易實現(xiàn)這點，可首頁是靜態(tài)頁面，聯(lián)想廣告控件的原理決定采用javascript+xml實現(xiàn)這點方面配置，更新廣告時只要更新xml即可，方便了廣告輪換2013-08-08
這篇文章主要為大家詳細介紹了JavaScript事件代理和委托，感興趣的小伙伴們可以參考一下2016-04-04