JavaScript仿京東實現秒殺倒計時案例詳解
功能介紹:
1、這個倒計時是不斷變化的,因此需要定時器來自動變化(setInterval)
2、三個黑色的盒子,分別存放時、分秒
3、三個盒子利用innerHTML存入倒計時
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { background-color: black; width: 50px; height: 50px; margin-left: 20px; float: left; color: white; font-size: 20px; text-align: center; line-height: 50px; } </style> </head> <body> <div class='h1'></div> <div class='m'></div> <div class='s1'></div> <script> //把時間放到div中去 var div = document.querySelectorAll('div') var timer1 = setInterval(function() { var date1 = new Date(2022, 3, 2, 18, 40, 0); //獲得到點截至時間距離標準時間的毫秒數 var date2 = new Date(); //獲得目前時間距離準時間的毫秒數 var date = (date1 - date2) / 1000; //用到點時間的毫秒數減去現在時間的毫秒數,必須先化為秒單位,之後再進行轉換 var h = parseInt((date / 60 / 60) % 24); //小時 var m = parseInt((date / 60) % 60); //分鐘 var s = parseInt(date % 60); //秒 一定要包含在這個函數中,因為是間隔1秒就要重新算一遍,需要提高準確率的話,把秒數減少(刷新間隔) div[2].innerHTML = s div[1].innerHTML = m div[0].innerHTML = h }, [1]) </script> </body> </html>
改進:
<script> //把時間放到div中去 var div = document.querySelectorAll('div') var timer1 = setInterval(fn, [1000]) var date1 = new Date(2022, 3, 2, 18, 40, 0); var date2 = new Date(); var date = (date1 - date2) / 1000; var h = parseInt((date / 60 / 60) % 24); var m = parseInt((date / 60) % 60); var s = parseInt(date % 60); div[2].innerHTML = s div[1].innerHTML = m div[0].innerHTML = h //解決剛刷新,數字不顯示的問題 function fn() { var date1 = new Date(2022, 3, 2, 18, 40, 0); //獲得到點截至時間距離標準時間的毫秒數 var date2 = new Date(); //獲得目前時間距離準時間的毫秒數 var date = (date1 - date2) / 1000; //用到點時間的毫秒數減去現在時間的毫秒數,必須先化為秒單位,之後再進行轉換 var h = parseInt((date / 60 / 60) % 24); //小時 var m = parseInt((date / 60) % 60); //分鐘 var s = parseInt(date % 60); //秒 一定要包含在這個函數中(最好是封裝一個函數),因為是間隔1秒就要重新算一遍,需要提高準確率的話,把秒數減少(刷新間隔).如果間隔比較大的話,一刷新頁面,會產生空白。解決方法就是,在未調用這個函數前,先把時間放入到div盒子中 div[2].innerHTML = s div[1].innerHTML = m div[0].innerHTML = h } </script>
添加停止倒計時按鈕:
<button>停止倒計時</button> var btn = document.querySelector('button') btn.addEventListener('click', function() { clearInterval(timer1) })
到此這篇關於JavaScript仿京東實現秒殺倒計時案例詳解的文章就介紹到這瞭,更多相關JavaScript秒殺倒計時內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!