用javascript實現(xiàn)倒計時效果

更新時間：2021年02月09日 10:41:25 作者：愛前端的茂茂

這篇文章主要為大家詳細(xì)介紹了用javascript實現(xiàn)倒計時效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

用Javascript實現(xiàn)倒計時效果，供大家參考，具體內(nèi)容如下

正在學(xué)習(xí)大前端中，有代碼和思路不規(guī)范不正確的地方往多多包涵，感謝指教

在某些商城網(wǎng)站中，我們常?？梢钥匆娖渚W(wǎng)站或者app上有一個區(qū)域放的是倒計時，來用來提醒用戶還有多少時間將會發(fā)生什么事情，下面我們用代碼來對其進(jìn)行實現(xiàn)

代碼如下：

<!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調(diào)用，防止第一次刷新有空白
 //開啟定時器,這是等了1000ms后才開啟的定時器
 setInterval(countDown,1)
 function countDown() {
 var nowTime = +new Date(); // 返回的是當(dāng)前時間總的毫秒數(shù)
 var times = (inputTime - nowTime) / 1000; // times是剩余時間總的秒數(shù)
 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); // 當(dāng)前的秒
 s = s < 10 ? '0' + s : s;
 sce.innerHTML = s;
 }
</script>
</body>
</html>

演示效果：

時間一秒一秒得倒計時

代碼解釋：

這里我把三個行內(nèi)元素span放在了塊元素div里面，由于行內(nèi)元素不能改寬高，所以都換成行內(nèi)塊元素。

這里因為倒計時要修改的地方是三個span盒子，分別對應(yīng)這小時，分鐘，秒數(shù)所以獲取這三個span的事件。然后用inputTime這個變量來接收我們的目的時間。

然后創(chuàng)建一個countDown為名字的函數(shù)。函數(shù)里面用nowTime這個變量來接收當(dāng)前的時間。因為接收到的時間是以毫秒為單位，所以用一個變量times來接收目的時間和現(xiàn)在時間的時間差，然后再除以1000，因為1s=1000ms，這里就得到了剩余的秒數(shù)。

用h表示剩余的小時一天=24小時，一個小時=60分鐘，1分鐘=60s。所以這里用總的秒數(shù)/60/60%24就得到了剩余的小時數(shù)。然后為了讓樣式更好看，我們把顯示小數(shù)設(shè)置為兩位，這里用的是三元運算符：小時小于10？如果小于就在前面+‘0'；如果大于10就只返回數(shù)字。并用h來進(jìn)行接收，然后把h給hours這個盒子。下面的分鐘和秒數(shù)都是一樣的原理。
然后函數(shù)寫好了，我們再用定時器來調(diào)用這個函數(shù)，間隔時間為1/1000ms。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: