?

css部分

<style>div {background-color: rgb(246,71,45);width: 134px;height: 192px;}.one{color: aliceblue;text-align: center;font-size: 24px;padding-top: 36px;}.two {color: rgb(253,147,116);margin-top: -22px;padding-left: 16px;}.three {color: aliceblue;font-size: 8px;margin-top: -10px;padding-left: 6px;}img {position: relative;left: 60px;top: -8px;width: 15px;height: 23px;}div span {float: left;display: block;margin-right: 4px;width: 35px;height: 35px;background-color: #000;font-size: 14px;color: #fff;text-align: center;line-height: 35px;font-weight: 700;}</style>

html部分

<div><p class="one">京東秒殺</p><p class="two">FLASH DEALS</p><img src="./電,閃電,電力,電量.png" alt=""><p class="three">本場(chǎng)距離商品結(jié)束還剩</p><span class="hour">1</span><span class="minute">2</span><span class="second">3</span></div>

js部分

<script>//1.獲取元素var hour = document.querySelector(".hour"); //小時(shí)的黑色盒子var minute = document.querySelector(".minute"); //分鐘的黑色盒子var second = document.querySelector(".second"); //秒數(shù)的黑色盒子var inputTime = +new Date("2022-10-18 13:00:00"); //返回的是用戶輸入時(shí)間總的毫秒數(shù)countDown(); //我們先調(diào)用一次這個(gè)函數(shù)，防止第一次刷新頁面有空白//開啟定時(shí)器setInterval(countDown, 1000);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;hour.innerHTML = h; //把剩余的小時(shí)給 hour 盒子var m = parseInt((times / 60) % 60); //分m = m < 10 ? "0" + m : m;minute.innerHTML = m; //把剩余的分鐘給 minute 盒子var s = parseInt(times % 60); //秒s = s < 10 ? "0" + s : s;second.innerHTML = s; //把剩余的秒數(shù)給 second 盒子}</script>

總結(jié)

以上是生活随笔為你收集整理的案例：京东秒杀的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。