用Javascript實現倒計時效果，供大家參考，具體內容如下
正在學習大前端中，有代碼和思路不規范不正確的地方往多多包涵，感謝指教
在某些商城網站中，我們常常可以看見其網站或者app上有一個區域放的是倒計時，來用來提醒用戶還有多少時間將會發生什么事情，下面我們用代碼來對其進行實現
代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div { margin: 300px; border: 1px solid pink; } span { display: inline-block; width: 40px; height: 40px; background-color: blue; font-size: 20px; color: #fff; text-align: center; line-height: 40px; } </style></head><body><div> <span class="hour">1</span> <span class="minute">2</span> <span class="second">3</span></div><script> var hours=document.querySelector('.hour') var min=document.querySelector('.minute') var sce=document.querySelector('.second') var inputTime=+new Date('2021-2-8 16:40:00') //countDown()//先1調用，防止第一次刷新有空白 //開啟定時器,這是等了1000ms后才開啟的定時器 setInterval(countDown,1) function countDown() { var nowTime = +new Date(); // 返回的是當前時間總的毫秒數 var times = (inputTime - nowTime) / 1000; // times是剩余時間總的秒數 var h = parseInt(times / 60 / 60 % 24); //時 h = h < 10 ? '0' + h : h; hours.innerHTML = h; // 把剩余的小時給 小時黑色盒子 var m = parseInt(times / 60 % 60); // 分 m = m < 10 ? '0' + m : m; min.innerHTML = m; var s = parseInt(times % 60); // 當前的秒 s = s < 10 ? '0' + s : s; sce.innerHTML = s; }</script></body></html> |
演示效果：
時間一秒一秒得倒計時
代碼解釋：
這里我把三個行內元素span放在了塊元素div里面，由于行內元素不能改寬高，所以都換成行內塊元素。
這里因為倒計時要修改的地方是三個span盒子，分別對應這小時，分鐘，秒數所以獲取這三個span的事件。然后用inputTime這個變量來接收我們的目的時間。
然后創建一個countDown為名字的函數。函數里面用nowTime這個變量來接收當前的時間。因為接收到的時間是以毫秒為單位，所以用一個變量times來接收目的時間和現在時間的時間差，然后再除以1000，因為1s=1000ms，這里就得到了剩余的秒數。
用h表示剩余的小時一天=24小時，一個小時=60分鐘，1分鐘=60s。所以這里用總的秒數/60/60%24就得到了剩余的小時數。然后為了讓樣式更好看，我們把顯示小數設置為兩位，這里用的是三元運算符：小時小于10？如果小于就在前面+‘0'；如果大于10就只返回數字。并用h來進行接收，然后把h給hours這個盒子。下面的分鐘和秒數都是一樣的原理。
然后函數寫好了，我們再用定時器來調用這個函數，間隔時間為1/1000ms。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/weixin_44029226/article/details/113735572
