快捷導(dǎo)航

用javascript實(shí)現(xiàn)倒計(jì)時(shí)效果

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

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

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

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

在某些商城網(wǎng)站中，我們常?？梢钥匆娖渚W(wǎng)站或者app上有一個(gè)區(qū)域放的是倒計(jì)時(shí)，來(lái)用來(lái)提醒用戶還有多少時(shí)間將會(huì)發(fā)生什么事情，下面我們用代碼來(lái)對(duì)其進(jìn)行實(shí)現(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)用，防止第一次刷新有空白
 //開啟定時(shí)器,這是等了1000ms后才開啟的定時(shí)器
 setInterval(countDown,1)
 function countDown() {
 var nowTime = +new Date(); // 返回的是當(dāng)前時(shí)間總的毫秒數(shù)
 var times = (inputTime - nowTime) / 1000; // times是剩余時(shí)間總的秒數(shù)
 var h = parseInt(times / 60 / 60 % 24); //時(shí)
 h = h < 10 ? '0' + h : h;
 hours.innerHTML = h; // 把剩余的小時(shí)給 小時(shí)黑色盒子
 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>

演示效果：

時(shí)間一秒一秒得倒計(jì)時(shí)

代碼解釋：

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

這里因?yàn)榈褂?jì)時(shí)要修改的地方是三個(gè)span盒子，分別對(duì)應(yīng)這小時(shí)，分鐘，秒數(shù)所以獲取這三個(gè)span的事件。然后用inputTime這個(gè)變量來(lái)接收我們的目的時(shí)間。

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

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

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

您可能感興趣的文章: