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