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