JavaScript實現前端網頁版倒計時
使用原生JavaScript簡單實現倒計時,供大傢參考,具體內容如下
效果
代碼
// An highlighted block <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- css樣式 --> <style type="text/css"> * { margin: 0; padding: 0; } .onsell { height: 400px; width: 200px; border: 1px solid #F2F2F2; margin: 10px; box-shadow: 1px 2px 4px rgba(0, 0, 0, .2); } .box { /* display: none; */ float: left; margin: 328px 34px 0; } .box div { position: relative; display: inline-block; width: 40px; height: 40px; background-color: #333; color: #fff; font-size: 20px; text-align: center; line-height: 40px; box-shadow: 1px 2px 4px rgba(0, 0, 0, .4); } </style> </head> <body> <!-- 要求:某商品在將來某一天進行促銷一天,利用js制作倒計時效果: 時:分:秒 --> <div class="onsell"> <div class="box"> <div class="hour">00</div> <div class="minutes">00</div> <div class="seconds">00</div> </div> </div> </body> </html> <script> window.onload = function () { let hour = document.querySelector('.hour') let minutes = document.querySelector('.minutes') let seconds = document.querySelector('.seconds') // 倒計時的時間戳 使用+將時間對象轉為時間戳 等同於Date.now() let wantTime = +new Date('2021-3-17 18:00:00') countTime() let timer = setInterval(() => { countTime() }, 1000) function countTime() { let currentTime = +new Date() if (wantTime >= currentTime) { let times = (wantTime - currentTime) / 1000 // 總秒數 時間戳/1000 = 秒 let remainDay = parseInt(times / 60 / 60 / 24) // 餘數取整就是剩餘的天數 console.log(remainDay); if (remainDay === 0) { if(times < 1) { // 倒計時完畢 // 這裡觸發操作 } // 天數小於一天開始計時 setTime(times) } } else { hour.innerHTML = '00' minutes.innerHTML = '00' seconds.innerHTML = '00' } } function setTime(time) { // 粗糙版 let s = parseInt(time % 60) s = s < 10 ? '0' + s : s let m = parseInt(time / 60 % 60) m = m < 10 ? '0' + m : m let h = parseInt(time / 60 / 60 % 24) h = h < 10 ? '0' + h : h hour.innerHTML = h minutes.innerHTML = m seconds.innerHTML = s } } </script>
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。