目錄
實(shí)現(xiàn)效果?
案例分析
代碼分析
代碼實(shí)現(xiàn) （完整）
背景圖片引用
?
實(shí)現(xiàn)效果?
案例分析
?1.倒計(jì)時(shí)是不斷變化的 所以需要一個(gè)定時(shí)器（setInterval）
?2.三個(gè)盒子通過 innerHTML 進(jìn)行賦值 放入時(shí)分秒
?3.使用Date()對象獲取當(dāng)前時(shí)間(時(shí)間戳)
?4.傳遞參數(shù)獲取活動(dòng)開始的時(shí)間，兩次時(shí)間的單位都是秒
?5.兩個(gè)時(shí)間相減可得到相距的時(shí)間
?6.通過計(jì)算得到小時(shí)，分鐘，秒鐘 注意要用到補(bǔ)零
?7.使用setInterval(function(){},1000)函數(shù)每1秒調(diào)用一次倒計(jì)時(shí)函數(shù)(1000為毫秒)
?8.調(diào)用倒計(jì)時(shí)函數(shù)
代碼分析
?html部分
<div class="timedown"> <div class="text1">京東秒殺</div> <div class="text2">18:00點(diǎn)場 距結(jié)束</div> <span class="hour">1</span> <span class="minute">2</span> <span class="second">3</span> </div>css部分（簡單布局）
<style> .timedown { position: relative; width: 200px; height: 270px; background: url(../img/flash.png); } .text1 { text-align: center; padding-top: 30px; font-size: 35px; font-weight: 1000; color: white; } .text2 { text-align: center; padding-top: 100px; font-size: 17px; font-weight: 1000; color: white; } span { position: relative; display: inline-block; width: 30px; height: 30px; background-color: black; padding: 5px; margin-left: 18px; margin-top: 12px; color: white; text-align: center; font-size: 15px; line-height: 30px; } </style>js部分（重要）
（1）獲取元素文章來源：http://www.zghlxwxcb.cn/news/detail-486697.html
var hour = document.querySelector(".hour") var minute = document.querySelector(".minute") var second = document.querySelector(".second") var inputTime = +new Date("2022-10-7 20:00:00")（2）注冊事件 處理程序文章來源地址http://www.zghlxwxcb.cn/news/detail-486697.html
- ? ?注意看：這里在設(shè)置倒計(jì)時(shí)函數(shù)之前就調(diào)用了倒計(jì)時(shí)函數(shù)，目的是避免刷新頁面出現(xiàn)延遲的現(xiàn)象（也就是說使頁面中不再出現(xiàn)span標(biāo)簽中原本的文字內(nèi)容“123”）
- 這里用innerHTML 給時(shí)分秒 重新賦值
countDown(); setInterval(countDown, 1000);//這個(gè)回調(diào)函數(shù)如果是調(diào)用的情況，不用加（） function countDown() { var nowTime = +new Date(); var times = (inputTime - nowTime) / 1000; var h = parseInt(times / 60 / 60 % 24); h = h > 10 ? h : h+"0" ; hour.innerHTML = h;//給hour重新賦值h var m = parseInt(times / 60 % 60); m = m > 10 ? m : "0" + m; minute.innerHTML = m; var s = parseInt(times % 60); s = s > 10 ? s : "0" + s; second.innerHTML = s; }
代碼實(shí)現(xiàn) （完整）
<!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>模擬京東秒殺倒計(jì)時(shí)</title> <style> .timedown { position: relative; width: 200px; height: 270px; background: url(../img/flash.png); } .text1 { text-align: center; padding-top: 30px; font-size: 35px; font-weight: 1000; color: white; } .text2 { text-align: center; padding-top: 100px; font-size: 17px; font-weight: 1000; color: white; } span { position: relative; display: inline-block; width: 30px; height: 30px; background-color: black; padding: 5px; margin-left: 18px; margin-top: 12px; color: white; text-align: center; font-size: 15px; line-height: 30px; } </style> </head> <div class="timedown"> <div class="text1">京東秒殺</div> <div class="text2">18:00點(diǎn)場 距結(jié)束</div> <span class="hour">1</span> <span class="minute">2</span> <span class="second">3</span> </div> <script> var hour = document.querySelector(".hour") var minute = document.querySelector(".minute") var second = document.querySelector(".second") var inputTime = +new Date("2022-10-7 20:00:00") countDown(); setInterval(countDown, 1000); function countDown() { var nowTime = +new Date(); var times = (inputTime - nowTime) / 1000; var h = parseInt(times / 60 / 60 % 24); h = h > 10 ? h : h+"0" ; hour.innerHTML = h;//給hour重新賦值h var m = parseInt(times / 60 % 60); m = m > 10 ? m : "0" + m; minute.innerHTML = m; var s = parseInt(times % 60); s = s > 10 ? s : "0" + s; second.innerHTML = s; } </script> <body> </html>
背景圖片引用
到了這里，關(guān)于案例：模擬京東秒殺倒計(jì)時(shí)（完整代碼）【前端實(shí)現(xiàn)】的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
