用javascript實(shí)現(xiàn)倒計(jì)時(shí)效果
用Javascript實(shí)現(xiàn)倒計(jì)時(shí)效果，供大家參考，具體內(nèi)容如下
正在學(xué)習(xí)大前端中，有代碼和思路不規(guī)范不正確的地方往多多包涵，感謝指教
在某些商城網(wǎng)站中，我們常常可以看見其網(wǎng)站或者app上有一個(gè)區(qū)域放的是倒計(jì)時(shí)，來用來提醒用戶還有多少時(shí)間將會(huì)發(fā)生什么事情，下面我們用代碼來對(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è)變量來接收我們的目的時(shí)間。
然后創(chuàng)建一個(gè)countDown為名字的函數(shù)。函數(shù)里面用nowTime這個(gè)變量來接收當(dāng)前的時(shí)間。因?yàn)榻邮盏降臅r(shí)間是以毫秒為單位，所以用一個(gè)變量times來接收目的時(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來進(jìn)行接收，然后把h給hours這個(gè)盒子。下面的分鐘和秒數(shù)都是一樣的原理。然后函數(shù)寫好了，我們?cè)儆枚〞r(shí)器來調(diào)用這個(gè)函數(shù)，間隔時(shí)間為1/1000ms。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. ajax請(qǐng)求添加自定義header參數(shù)代碼2. 基于javascript處理二進(jìn)制圖片流過程詳解3. Gitlab CI-CD自動(dòng)化部署SpringBoot項(xiàng)目的方法步驟4. ASP基礎(chǔ)知識(shí)VBScript基本元素講解5. 解決android studio引用遠(yuǎn)程倉庫下載慢(JCenter下載慢)6. idea刪除項(xiàng)目的操作方法7. 使用python 計(jì)算百分位數(shù)實(shí)現(xiàn)數(shù)據(jù)分箱代碼8. Kotlin + Flow 實(shí)現(xiàn)Android 應(yīng)用初始化任務(wù)啟動(dòng)庫9. 詳談ajax返回?cái)?shù)據(jù)成功 卻進(jìn)入error的方法10. axios和ajax的區(qū)別點(diǎn)總結(jié)
網(wǎng)公網(wǎng)安備