用javascript實現倒計時效果
用Javascript實現倒計時效果，供大家參考，具體內容如下
正在學習大前端中，有代碼和思路不規范不正確的地方往多多包涵，感謝指教
在某些商城網站中，我們常常可以看見其網站或者app上有一個區域放的是倒計時，來用來提醒用戶還有多少時間將會發生什么事情，下面我們用代碼來對其進行實現
代碼如下：
<!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調用，防止第一次刷新有空白 //開啟定時器,這是等了1000ms后才開啟的定時器 setInterval(countDown,1) function countDown() { var nowTime = +new Date(); // 返回的是當前時間總的毫秒數 var times = (inputTime - nowTime) / 1000; // times是剩余時間總的秒數 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); // 當前的秒 s = s < 10 ? ’0’ + s : s; sce.innerHTML = s; }</script></body></html>
演示效果：
時間一秒一秒得倒計時
代碼解釋：
這里我把三個行內元素span放在了塊元素div里面，由于行內元素不能改寬高，所以都換成行內塊元素。
這里因為倒計時要修改的地方是三個span盒子，分別對應這小時，分鐘，秒數所以獲取這三個span的事件。然后用inputTime這個變量來接收我們的目的時間。
然后創建一個countDown為名字的函數。函數里面用nowTime這個變量來接收當前的時間。因為接收到的時間是以毫秒為單位，所以用一個變量times來接收目的時間和現在時間的時間差，然后再除以1000，因為1s=1000ms，這里就得到了剩余的秒數。
用h表示剩余的小時一天=24小時，一個小時=60分鐘，1分鐘=60s。所以這里用總的秒數/60/60%24就得到了剩余的小時數。然后為了讓樣式更好看，我們把顯示小數設置為兩位，這里用的是三元運算符：小時小于10？如果小于就在前面+‘0’；如果大于10就只返回數字。并用h來進行接收，然后把h給hours這個盒子。下面的分鐘和秒數都是一樣的原理。然后函數寫好了，我們再用定時器來調用這個函數，間隔時間為1/1000ms。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
1. python利用os模塊編寫文件復制功能——copy()函數用法2. php測試程序運行速度和頁面執行速度的代碼3. php網絡安全中命令執行漏洞的產生及本質探究4. 三個不常見的 HTML5 實用新特性簡介5. 無線標記語言(WML)基礎之WMLScript 基礎第1/2頁6. ajax請求添加自定義header參數代碼7. Python使用jupyter notebook查看ipynb文件過程解析8. 解決Python 進程池Pool中一些坑9. 解決python腳本中error: unrecognized arguments: True錯誤10. IntelliJ IDEA創建普通的Java 項目及創建 Java 文件并運行的教程
網公網安備