快捷導(dǎo)航

基于JS代碼實(shí)現(xiàn)簡(jiǎn)單易用的倒計(jì)時(shí) x 天 x 時(shí) x 分 x 秒效果

更新時(shí)間：2017年07月13日 09:15:42 作者：九轉(zhuǎn)十指

這篇文章主要介紹了基于JS代碼實(shí)現(xiàn)簡(jiǎn)單易用的倒計(jì)時(shí) x 天 x 時(shí) 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>時(shí)<span class="JS-fen"></span>分<span class="JS-miao"></span>秒
</div>

以上所述是小編給大家介紹的基于JS代碼實(shí)現(xiàn)簡(jiǎn)單易用的倒計(jì)時(shí) x 天 x 時(shí) x 分 x 秒效果，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

flexible.js實(shí)現(xiàn)移動(dòng)端rem適配方案
這篇文章主要介紹了flexible.js實(shí)現(xiàn)移動(dòng)端rem適配方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-04-04
JavaScript中判斷函數(shù)、變量是否存在
這篇文章主要介紹了JavaScript中判斷函數(shù)、變量是否存在,本文給出了多個(gè)判斷函數(shù)是否存在的方法,并分別給出代碼實(shí)例,需要的朋友可以參考下
2015-06-06
超輕量級(jí)的js時(shí)間庫miment使用解析
這篇文章主要介紹了超輕量級(jí)的js時(shí)間庫miment使用解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-08-08
基于javascript實(shí)現(xiàn)表格的簡(jiǎn)單操作
這篇文章主要為大家詳細(xì)介紹了基于javascript實(shí)現(xiàn)表格的簡(jiǎn)單操作，具有一定的參考價(jià)值，感興趣的朋友可以參考一下
2016-05-05
js replace替換所有匹配的字符串
這篇文章主要介紹了js replace替換所有匹配的字符串,需要的朋友可以參考下
2014-02-02
移動(dòng)端吸頂fixbar的解決方案詳解
這篇文章主要介紹了移動(dòng)端吸頂fixbar的解決方案詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-07-07
js實(shí)現(xiàn)滾動(dòng)條自動(dòng)滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)滾動(dòng)條自動(dòng)滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-12-12
Webpack devServer中的 proxy 實(shí)現(xiàn)跨域的解決
這篇文章主要介紹了Webpack devServer中的 proxy 實(shí)現(xiàn)跨域的解決，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-06-06
簡(jiǎn)單實(shí)用的反饋表單無刷新提交帶驗(yàn)證
表單無刷新提交帶驗(yàn)證，非常適用于反饋，具體的實(shí)現(xiàn)如下包含各個(gè)功能代碼，喜歡的朋友可以參考下
2013-11-11
JavaScript中?Promise?的使用技巧
這篇文章主要介紹了JavaScript中?Promise?的使用技巧，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-08-08