【前端】倒计时、秒杀、定时器
生活随笔
收集整理的這篇文章主要介紹了
【前端】倒计时、秒杀、定时器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 圖片資源
- 代碼資源
沒有太大差別！！！對應上了就點個贊👍吧！！！
圖片資源
代碼資源
<!DOCTYPE html> <html lang=""> <head><meta charset="utf-8"/><title></title><style>* {margin: 0;padding: 0;}.main {width: 702px;margin: 0 auto;border: 1px solid red;}.dates {width: 40%;line-height: 33px;font-size: 20px;font-family: 仿宋, serif;text-align: center;position: relative;top: -115px;left: 315px;}#date_day,#date_hour,#date_minute,#date_sec {border-bottom: 1px solid red;display: inline-block;width: 30px;}#taps {width: 40%;color: red;position: relative;top: -100px;left: 360px;}</style> </head> <body> <div class="main"><img src="img/flash_sale.png" alt=""/><div class="dates"><span id="date_day">0</span> 天 <span id="date_hour">0</span> 時 <span id="date_minute">0</span> 分<span id="date_sec" style="color: red;">0</span> 秒</div><div id="taps" style="display: none;">秒殺時間已經終止！！！</div><script>var end = "";var endDate;//設置截止時間end = prompt("請輸入秒殺結束的時間\n例如：2021-11-30 23:59:59");console.log(end)watch();function watch() {endDate = new Date(end); //結束時間var endDates = endDate.getTime();var tapsById = document.getElementById("taps");var timer = setInterval(function () {var curDates = new Date().getTime()var t = endDates - curDates;console.log(t)var d = 0,h = 0,m = 0,s = 0;if (t > 0) {d = Math.floor((t / 1000 / 3600) / 24)h = Math.floor((t / 1000 / 3600) % 24)m = Math.floor((t / 1000 / 60) % 60)s = Math.floor(t / 1000 % 60)} else {if (tapsById.style.display === "none") tapsById.style.display = "block";window.clearInterval(timer);setInterval(function () {location.reload();}, 3000)}document.getElementById("date_day").innerHTML = d > 9 ? d : '0' + d;document.getElementById("date_hour").innerHTML = h > 9 ? h : '0' + h;document.getElementById("date_minute").innerHTML = m > 9 ? m : '0' + m;document.getElementById("date_sec").innerHTML = s > 9 ? s : '0' + s;}, 1000)}</script> </div> </body> </html>總結
以上是生活随笔為你收集整理的【前端】倒计时、秒杀、定时器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 单片机原理及应用c51语言版林立,单片机
- 下一篇： 2017年html5行业报告,云适配发布