用javascript實(shí)現(xiàn)倒計(jì)時(shí)效果
用Javascript實(shí)現(xiàn)倒計(jì)時(shí)效果，供大家參考，具體內(nèi)容如下
正在學(xué)習(xí)大前端中，有代碼和思路不規(guī)范不正確的地方往多多包涵，感謝指教
在某些商城網(wǎng)站中，我們常常可以看見(jiàn)其網(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)用，防止第一次刷新有空白 //開(kāi)啟定時(shí)器,這是等了1000ms后才開(kāi)啟的定時(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ù)寫(xiě)好了，我們?cè)儆枚〞r(shí)器來(lái)調(diào)用這個(gè)函數(shù)，間隔時(shí)間為1/1000ms。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. python 讀txt文件,按‘,’分割每行數(shù)據(jù)操作2. Java Media Framework 基礎(chǔ)教程3. Python 忽略文件名編碼的方法4. JavaEE SpringMyBatis是什么? 它和Hibernate的區(qū)別及如何配置MyBatis5. 解決vue頁(yè)面刷新，數(shù)據(jù)丟失的問(wèn)題6. android studio實(shí)現(xiàn)簡(jiǎn)單的計(jì)算器（無(wú)bug）7. 在Mac中配置Python虛擬環(huán)境過(guò)程解析8. python如何實(shí)現(xiàn)word批量轉(zhuǎn)HTML9. 利用單元測(cè)試對(duì)PHP代碼進(jìn)行檢查10. python爬蟲(chóng)實(shí)戰(zhàn)之制作屬于自己的一個(gè)IP代理模塊
網(wǎng)公網(wǎng)安備