js定時(shí)器實(shí)現(xiàn)倒計(jì)時(shí)效果
本文實(shí)例為大家分享了js定時(shí)器實(shí)現(xiàn)倒計(jì)時(shí)效果展示的具體代碼,供大家參考,具體內(nèi)容如下
日期函數(shù)
倒計(jì)時(shí) = 用 將來的時(shí)間 - 現(xiàn)在的時(shí)間
問題:將來時(shí)間 距離 1970 毫秒數(shù) - 現(xiàn)在距離 1970年1
用將來的毫秒數(shù) - 現(xiàn)在的毫秒數(shù) 不斷轉(zhuǎn)換就可以了
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ font-size:30px; text-align: center; color:red; } </style> <script> window.onload = function(){ var demo = document.getElementById("demo"); var endTime = new Date("2017/11/12 17:30:00"); // 最終時(shí)間 setInterval(clock,1000); // 開啟定時(shí)器 function clock(){ var nowTime = new Date(); // 一定是要獲取最新的時(shí)間 // console.log(nowTime.getTime()); 獲得自己的毫秒 var second = parseInt((endTime.getTime() - nowTime.getTime()) / 1000); // 用將來的時(shí)間毫秒 - 現(xiàn)在的毫秒 / 1000 得到的 還剩下的秒 可能處不斷 取整 // console.log(second); // 一小時(shí) 3600 秒 // second / 3600 一共的小時(shí)數(shù) /24 天數(shù) var d = parseInt(second / 3600 / 24); //天數(shù) //console.log(d); var h = parseInt(second / 3600 % 24) // 小時(shí) // console.log(h); var m = parseInt(second / 60 ); //console.log(m); var s = parseInt(second ); // 當(dāng)前的秒 console.log(s); /* if(d<10) { d = "0" + d; }*/ d<10 ? d="0"+d : d; h<10 ? h="0"+h : h; m<10 ? m="0"+m : m; s<10 ? s="0"+s : s; demo.innerHTML = "距離搶購(gòu)時(shí)間還剩: "+d+"天 "+h+"小時(shí) "+m+"分鐘 "+s+"秒"; } } </script> </head> <body> <div id="demo"></div> </body> </html>
更多內(nèi)容請(qǐng)參考:js實(shí)現(xiàn)倒計(jì)時(shí)功能匯總
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 用JS寫了一個(gè)30分鐘倒計(jì)時(shí)器的實(shí)現(xiàn)示例
- js實(shí)現(xiàn)倒計(jì)時(shí)器自定義時(shí)間和暫停
- JS基于面向?qū)ο髮?shí)現(xiàn)的多個(gè)倒計(jì)時(shí)器功能示例
- JavaScript分秒倒計(jì)時(shí)器實(shí)現(xiàn)方法
- VB倒計(jì)時(shí)器和JS當(dāng)前時(shí)間
- JavaScript定時(shí)器設(shè)置、使用與倒計(jì)時(shí)案例詳解
- js 倒計(jì)時(shí)(高效率服務(wù)器時(shí)間同步)
- js實(shí)現(xiàn)瀏覽器倒計(jì)時(shí)跳轉(zhuǎn)頁(yè)面效果
- javascript同步服務(wù)器時(shí)間和同步倒計(jì)時(shí)小技巧
- JS實(shí)現(xiàn)簡(jiǎn)單網(wǎng)頁(yè)倒計(jì)時(shí)器
相關(guān)文章
JavaScript中本地存儲(chǔ)(LocalStorage)和會(huì)話存儲(chǔ)(SessionStorage)的使用
本地存儲(chǔ)和會(huì)話存儲(chǔ)是比較常用的方法,你知道兩者的區(qū)別嗎,本文詳細(xì)的介紹了JavaScript中本地存儲(chǔ)(LocalStorage)和會(huì)話存儲(chǔ)(SessionStorage)的使用,具有一定的參考價(jià)值,感興趣的可以了解一下2022-03-03js實(shí)現(xiàn)類似菜單風(fēng)格的TAB選項(xiàng)卡效果代碼
這篇文章主要介紹了js實(shí)現(xiàn)類似菜單風(fēng)格的TAB選項(xiàng)卡效果代碼,通過javascript鼠標(biāo)事件及頁(yè)面元素遍歷實(shí)現(xiàn)tab切換的功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-08-08js獲取location.href的參數(shù)實(shí)例代碼
本文為大家介紹下js如何獲取location.href的參數(shù),需要注意的是去掉參數(shù)里最開頭的?號(hào),具體實(shí)現(xiàn)如下,有需要的朋友可以參考下,希望對(duì)大家有所幫助2013-08-08JavaScript設(shè)計(jì)模式之策略模式詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript設(shè)計(jì)模式之策略模式的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06基于postman獲取動(dòng)態(tài)數(shù)據(jù)過程詳解
這篇文章主要介紹了基于postman獲取動(dòng)態(tài)數(shù)據(jù)過程詳解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09基于javascript實(shí)現(xiàn)窗口抖動(dòng)效果
這篇文章主要介紹了基于javascript實(shí)現(xiàn)窗口抖動(dòng)效果,需要的朋友可以參考下2016-01-01