利用定時(shí)器實(shí)現(xiàn)倒計(jì)時(shí)功能

分析：
1.三個(gè)盒子分別裝時(shí)、分、秒；利用innerHTML放入計(jì)算出的時(shí)、分、秒
2.倒計(jì)時(shí)是不斷變化的，每隔一秒調(diào)用一次，用定時(shí)器自動變化：setInterval
3.第一次執(zhí)行時(shí)會有間隔的毫秒數(shù)，剛刷新的頁面會有空白，解決方法：采用封裝函數(shù)的方式，先調(diào)用一次防止有頁面空白問題

//1.三個(gè)盒子分別裝時(shí)、分、秒； <div><span class="hour">時(shí)</span><span class="minute">分</span><span class="second">秒</span></div>

css:

<style>div {margin: 200px;}span {display: inline-block;width: 40px;height: 40px;background-color: #333;color: #fff;font-size: 20px;text-align: center;line-height: 40px;}</style>

js:

<script>//獲取元素:時(shí)、分、秒、當(dāng)前輸入的時(shí)間var hour = document.querySelector('.hour');var minute = document.querySelector('.minute');var second = document.querySelector('.second');var inputTime = +new Date('2021-2-18 18:00:00');//返回的是用戶輸入時(shí)間的總的毫秒數(shù)，可以修改這個(gè)值//先調(diào)用函數(shù)一次，防止第一次刷新頁面有空白countDown();//開啟定時(shí)器setInterval(countDown, 1000);//計(jì)算倒計(jì)時(shí)的函數(shù)function countDown() {var nowTime = +new Date(); //返回當(dāng)前時(shí)間總的毫秒數(shù)var times = (inputTime - nowTime) / 1000;//返回剩余時(shí)間的秒數(shù)：（輸入時(shí)間的毫秒數(shù)-當(dāng)前時(shí)間的毫秒數(shù)）/1000var h = parseInt(times / 60 / 60 % 24);//時(shí)h = h < 10 ? '0' + h : h;//補(bǔ)0hour.innerHTML = h;//把剩余的小時(shí)給裝時(shí)的盒子var m = parseInt(times / 60 % 60);//分m = m < 10 ? '0' + m : m;minute.innerHTML = m;var s = parseInt(times % 60);//秒s = s < 10 ? '0' + s : s;second.innerHTML = s;}</script>

總結(jié)

以上是生活随笔為你收集整理的利用定时器实现倒计时的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。