1.效果圖
![]()
2.html部分
![]()
3.邏輯部分
3.1獲取當前時間，時間差
//獲取當前時間
var date = new Date();
var now = date.getTime();
//設置截止時間
var str = "2023/9/14 12:28:34";
var endDate = new Date(str);
var end = endDate.getTime();
//時間差
var leftTime = end - now;
3.2 d,h,m,s保存倒計時的時間
//定義變量 d,h,m,s保存倒計時的時間
var d, h, m, s;
if (leftTime >= 0) {
d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
m = Math.floor(leftTime / 1000 / 60 % 60);
s = Math.floor(leftTime / 1000 % 60);
} else {
d = 0;
h = 0;
m = 0;
s = 0
}
3.3 小於0的時候補0
// 定義 小於0補0 的方法zero
function zero(num) {
if (num < 10) {
return "0" + num
}
return num
}
3.4 賦值給div 渲染
// 賦值到div中
document.getElementById("_d").innerHTML = zero(d) + "天";
document.getElementById("_h").innerHTML = zero(h) + "時";
document.getElementById("_m").innerHTML = zero(m) + "分";
document.getElementById("_s").innerHTML = zero(s) + "秒";
3.5 遞歸的方法調用countTime方法，顯示頂替時間
//遞歸每秒調用countTime方法，顯示動態時間效果
setTimeout(countTime, 1000);
3.6 完整代碼
<html>
<head>
<meta charset="UTF-8">
<title>js簡單時分秒倒計時</title>
</head>
<style>
.box {
background: #17deb9;
width: 350px;
height: 60px;
text-align: center;
border-radius: 30px;
}
</style>
<body onload="countTime()">
<div class="box">
<!-- <button onclick="countTime()">點擊</button>-->
<br>
<span id="_d">00</span>
<span id="_h">00</span>
<span id="_m">00</span>
<span id="_s">00</span>
</div>
</body>
<script type="text/javascript">
function countTime() {
//獲取當前時間
var date = new Date();
var now = date.getTime();
//設置截止時間
var str = "2023/9/14 12:28:34";
var endDate = new Date(str);
var end = endDate.getTime();
//時間差
var leftTime = end - now;
//定義變量 d,h,m,s保存倒計時的時間
var d, h, m, s;
if (leftTime >= 0) {
d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
m = Math.floor(leftTime / 1000 / 60 % 60);
s = Math.floor(leftTime / 1000 % 60);
} else {
d = 0;
h = 0;
m = 0;
s = 0
}
//將倒計時賦值到div中(普通的寫法)--1
// document.getElementById("_d").innerHTML = d+"天";
// document.getElementById("_h").innerHTML = h+"時";
// document.getElementById("_m").innerHTML = m+"分";
// document.getElementById("_s").innerHTML = s+"秒";
// -------------------------
//將倒計時賦值到div中(小於0，補0)--2
// 定義 小於0補0 的方法zero
function zero(num) {
if (num < 10) {
return "0" + num
}
return num
}
// 賦值到div中
document.getElementById("_d").innerHTML = zero(d) + "天";
document.getElementById("_h").innerHTML = zero(h) + "時";
document.getElementById("_m").innerHTML = zero(m) + "分";
document.getElementById("_s").innerHTML = zero(s) + "秒";
// -------------------------------
//遞歸每秒調用countTime方法，顯示動態時間效果
setTimeout(countTime, 1000);
// 倒計時 事件到了 彈出提醒
let box = document.querySelector('.box') //獲取元素
if (d === 0 && h === 0 && m === 0 && s === 0) {
box.style.background = 'red';
// alert('事件到啦~秒殺！！！');
}
}
</script>
</html>
2.html部分