使用js定时器实现倒计时功能
生活随笔
收集整理的這篇文章主要介紹了
使用js定时器实现倒计时功能
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
先看看效果圖：
?倒計時使用的技術(shù)主要就是js中的定時器。
????????首先還是先理一下思路，先要確定一個具體的時間，你想從哪個時間到哪個時間，我這個就是從現(xiàn)在的時間到2022年過年，然后使用data對象獲取天、小時、分鐘、秒，之后再使用定時器讓它像上圖一樣能夠一直保持運(yùn)動的狀態(tài)。
????????new data()表示的是當(dāng)前時間，也就是電腦上的時間，如果前面有個+，表示的當(dāng)前時間的毫秒，轉(zhuǎn)換為毫秒了。
舉個例子：
var date1 = new Date(); var date2 = +new Date(); console.log(date1) console.log(date2)結(jié)果如下：
程序代碼：
<!DOCTYPE html> <html><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title></title><style>*{margin: 0;padding: 0;}body{background-color: black;}#div{width: 600px;height: 100px;margin: 100px auto;font-size: 24px;/* 設(shè)置顏色 */background-color:rgba(128, 128, 128, 0.4);color:chartreuse;/* 邊框圓角 */border-radius: 10px;/* 設(shè)置文字居中 */text-align: center;line-height: 100px;} </style></head><body><div id="div"></div><script>// 獲取divvar div = document.getElementById('div');// 先調(diào)用一次函數(shù)，如果不調(diào)用刷新的時候會有一點(diǎn)時間顯示的是空白count();// 定時器//=>箭頭函數(shù)，是ES6新增的函數(shù)，表示一個匿名函數(shù)// =>前面是參數(shù)，后面是函數(shù)setInterval(() =>count() , 1000);// 封裝函數(shù)，計算倒計時function count(){var dateNow = +new Date();//當(dāng)前時間的毫秒數(shù)var date2 = +new Date('2023/1/22 00:00:00')//截止時間的毫秒數(shù)var cha = date2 - dateNow;//截止時間減去當(dāng)前時間的毫秒// 計算天時分秒tian = parseInt(cha / (24 * 3600 * 1000)) //天數(shù) 1s = 1000msvar yu1 = cha % (24 * 3600 * 1000) //余數(shù)hours = parseInt(yu1 / (3600 * 1000)) //小時var yu2 = yu1 % (3600 * 1000)minutes = parseInt(yu2 / (60 * 1000)) //分鐘var yu3 = yu2 % (60 * 1000);seconds = parseInt(yu3 / 1000) //秒// 輸出 ${}字符串拼接div.innerHTML = `現(xiàn)在距離2022年春節(jié)還有:${tian}天，${hours}小時，${minutes}分，${seconds}秒`} </script></body> </html>????????css部分我是自己加了一點(diǎn)樣式，如果想要簡單的也可以不加樣式，或者自己改一下樣式就可以了。
????????還需要注意的一點(diǎn)是截止時間是陽歷的時間，因?yàn)楂@取的當(dāng)前時間是陽歷的，所以截止時間也是陽歷的，這點(diǎn)需要注意。
總結(jié)
以上是生活随笔為你收集整理的使用js定时器实现倒计时功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一位上海女生所经历过的N次感情，对80
- 下一篇： 机器学习之数据准备