JavaScript制作頁(yè)面倒計(jì)時(shí)器的實(shí)現(xiàn)
制作頁(yè)面倒計(jì)時(shí)器,選定一個(gè)未來時(shí)間,得到幾天幾時(shí)幾分幾秒的倒計(jì)時(shí)。
在這里選擇使用兩個(gè)時(shí)間相差的毫秒數(shù)來計(jì)算相對(duì)應(yīng)的天數(shù)、小時(shí)數(shù)、分鐘數(shù)和秒數(shù)。為了使代碼看起來簡(jiǎn)潔,進(jìn)行了封裝函數(shù)。
1.setInterval(,1000)倒計(jì)時(shí)函數(shù),且每隔1000ms就循環(huán)執(zhí)行,以實(shí)現(xiàn)倒計(jì)時(shí)的效果。
2.關(guān)于這里毫秒值獲得,在前面js的時(shí)間對(duì)象博客中有詳細(xì)說明
3.在setInterval()函數(shù)中調(diào)用的countdown函數(shù)不能加(),因?yàn)榧由现髸?huì)自動(dòng)調(diào)用函數(shù),使得倒計(jì)時(shí)不能正常實(shí)現(xiàn)。
注意:1000ms = 1s
<!-- 文本顯示標(biāo)簽 --> <p></p> <script> var p = document.querySelector('p'); //獲得p標(biāo)簽事件 var endtime = new Date('2022-7-31 12:00:00').getTime(); //未來時(shí)間的毫秒值 setInterval(countdown,1000); //倒計(jì)時(shí)函數(shù) function countdown(){ var nowtime = new Date().getTime(); //現(xiàn)在時(shí)間的毫秒值 var time = endtime - nowtime; //兩個(gè)時(shí)間的毫秒值差,用于下面時(shí)間的計(jì)算 var day = parseInt(time/(1000*60*60*24)); //天數(shù) var hour = parseInt(time/(1000*60*60)%24); //小時(shí)數(shù) var minute = parseInt(time/1000/60%60); //分鐘數(shù) var seconds = parseInt(time/1000%60); //秒數(shù) p.innerText = day+'天'+hour+':'+minute+':'+seconds; //把內(nèi)容添加到p標(biāo)簽中 } </script>
結(jié)果展示:
到此這篇關(guān)于JavaScript制作頁(yè)面倒計(jì)時(shí)器的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)JavaScript 頁(yè)面倒計(jì)時(shí)器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- JS實(shí)現(xiàn)模仿微博發(fā)布效果實(shí)例代碼
- JS實(shí)現(xiàn)仿新浪微博發(fā)布內(nèi)容為空時(shí)提示功能代碼
- 基于javascript制作微博發(fā)布欄效果
- js控住DOM實(shí)現(xiàn)發(fā)布微博效果
- JavaScript仿微博發(fā)布信息案例
- js實(shí)現(xiàn)微博發(fā)布小功能
- JavaScript實(shí)現(xiàn)簡(jiǎn)單的倒計(jì)時(shí)效果
- javascript實(shí)現(xiàn)倒計(jì)時(shí)小案例
- 基于JS實(shí)現(xiàn)01支付后的10秒倒計(jì)時(shí)
- JavaScript實(shí)現(xiàn)倒計(jì)時(shí)功能2種方法實(shí)例
- js實(shí)現(xiàn)日期天數(shù)、時(shí)分秒的倒計(jì)時(shí)完整代碼
- JS面試必備之如何實(shí)現(xiàn)一個(gè)精確的倒計(jì)時(shí)
相關(guān)文章
JavaScript中String.prototype用法實(shí)例
這篇文章主要介紹了JavaScript中String.prototype用法,實(shí)例分析了prototype的功能及使用技巧,需要的朋友可以參考下2015-05-05JS教程:window.location使用方法的區(qū)別介紹
這篇文章介紹了window.location使用方法的區(qū)別,有需要的朋友可以參考一下2013-10-10CocosCreator經(jīng)典入門項(xiàng)目之flappybird
這篇文章主要介紹了CocosCreator經(jīng)典入門項(xiàng)目之flappybird,詳細(xì)說明了制作的每個(gè)步驟,還有詳盡的代碼,對(duì)CocosCreator感興趣的同學(xué),一定要看一下2021-04-04JavaScript實(shí)現(xiàn)簡(jiǎn)單獲取當(dāng)前網(wǎng)頁(yè)網(wǎng)址的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單獲取當(dāng)前網(wǎng)頁(yè)網(wǎng)址的方法,通過location對(duì)象的href方法來獲取網(wǎng)址,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-11-11幾個(gè)比較實(shí)用的JavaScript 測(cè)試及效驗(yàn)工具
JavaScript 是一款強(qiáng)大的廣泛運(yùn)用于現(xiàn)代Web站點(diǎn)及應(yīng)用的腳本語(yǔ)言。作為一個(gè)技藝精湛的 Web 開發(fā)者,掌握J(rèn)avaScript可以增強(qiáng)用戶的使用體驗(yàn),提供交互及富客戶端等功能。2010-04-04