用JavaScript达到从现在到目标时间的倒计时
效果展示
js代码：
var dbox = document.querySelectorAll(".box div")[0]
var hbox = document.querySelectorAll(".box div")[1]
var mbox = document.querySelectorAll(".box div")[2]
var sbox = document.querySelectorAll(".box div")[3]
var totime="2022-3-1 08:00:00"
var countdown = function () {
var otime = new Date()
var imputTime = new Date(totime)
var time = imputTime - otime
if (time < 0) {
console.log("error");
return false
}
var d = Math.floor(time / 1000 / 60 / 60 / 24)
d = d < 10 ? "0" + d : d
var h = Math.floor(time / 1000 / 60 / 60 % 24)
h = h < 10 ? "0" + h : h
var m = Math.floor(time / 1000 / 60 % 60)
m = m < 10 ? "0" + m : m
var s = Math.floor(time / 1000 % 60)
s = s < 10 ? "0" + s : s
console.log(d + "天"+h + "时" + m + "分" + s+"秒");
dbox.innerHTML=d+"天"
hbox.innerHTML=h+"时"
mbox.innerHTML=m+"分"
sbox.innerHTML=s+"秒"
}
setInterval(countdown,1000)
</script>
根据时间戳得到具体的时分秒的值，判断小于10的时候再前面补一个0
d = d < 10 ? "0" + d : d
var h = Math.floor(time / 1000 / 60 / 60 % 24)
h = h < 10 ? "0" + h : h
var m = Math.floor(time / 1000 / 60 % 60)
m = m < 10 ? "0" + m : m
var s = Math.floor(time / 1000 % 60)
s = s < 10 ? "0" + s : s
完整代码：
<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>Document</title>
<style>
.box {
margin: 100px auto;
display: flex;
justify-content: center;
}
.box div {
height: 50px;
}
</style>
</head>
<body>
<div class="box">
<div>00天</div>
<div>00时</div>
<div>00分</div>
<div>00秒</div>
</div>
<script>
var dbox = document.querySelectorAll(".box div")[0]
var hbox = document.querySelectorAll(".box div")[1]
var mbox = document.querySelectorAll(".box div")[2]
var sbox = document.querySelectorAll(".box div")[3]
var totime="2022-3-1 08:00:00"
var countdown = function () {
var otime = new Date()
var imputTime = new Date(totime)
var time = imputTime - otime
if (time < 0) {
console.log("error");
return false
}
var d = Math.floor(time / 1000 / 60 / 60 / 24)
d = d < 10 ? "0" + d : d
var h = Math.floor(time / 1000 / 60 / 60 % 24)
h = h < 10 ? "0" + h : h
var m = Math.floor(time / 1000 / 60 % 60)
m = m < 10 ? "0" + m : m
var s = Math.floor(time / 1000 % 60)
s = s < 10 ? "0" + s : s
console.log(d + "天"+h + "时" + m + "分" + s+"秒");
dbox.innerHTML=d+"天"
hbox.innerHTML=h+"时"
mbox.innerHTML=m+"分"
sbox.innerHTML=s+"秒"
}
setInterval(countdown,1000)
</script>
</body>
</html>
