用javascript實現倒計時效果

Posted on by

用Javascript實現倒計時效果，供大傢參考，具體內容如下

正在學習大前端中，有代碼和思路不規范不正確的地方往多多包涵，感謝指教

在某些商城網站中，我們常常可以看見其網站或者app上有一個區域放的是倒計時，來用來提醒用戶還有多少時間將會發生什麼事情，下面我們用代碼來對其進行實現

代碼如下：

<!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。

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：