倒计时小工具:自带注释
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js设置日期倒计时代码 - 站长素材</title>
<style>
html {
display: grid;
min-height: 100%;
}
body {
display: grid;
background: #183059;
}
.container {
position: relative;
margin: auto;
overflow: hidden;
width: 1500px;
height: 300px;
}
#timer {
text-align: center;
text-transform: uppercase;
font-family: "Lato", sans-serif;
font-size: .7em;
background: rgb(4, 6, 85);
}
.years,.days, .hours, .minutes, .seconds {
display: inline-block;
padding: 25px;
width: 150px;
border-radius: 30px;
}
.days {
background: #F0A202;
}
.hours {
background: #276FCF;
}
.minutes {
background: #F6F4F4;
}
.seconds {
background: #EF2F3C;
}
.numbers {
font-family: "Montserrat", sans-serif;
color: rgb(4, 6, 85);
font-size: 5em;
}
</style>
</head>
<body>
<div class="container">
<div id="timer"></div>
</div>
<script>
const target_time = new Date("Sep 10, 2022 00:00:00");
target_time.getTime();
var timer = setInterval(function() {
const now = new Date().getTime();
const diff_val = target_time - now;
var days = Math.floor(diff_val / (1000 * 60 * 60 * 24));
var hours = Math.floor((diff_val % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((diff_val % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((diff_val % (1000 * 60)) / 1000);
document.getElementById("timer").innerHTML =
"<div class=\"days\"> \
<div class=\"numbers\">" + days + "</div>days</div> \
<div class=\"hours\"> \
<div class=\"numbers\">" + hours + "</div>hours</div> \
<div class=\"minutes\"> \
<div class=\"numbers\">" + minutes + "</div>minutes</div> \
<div class=\"seconds\"> \
<div class=\"numbers\">" + seconds + "</div>seconds</div> \
</div>";
}, 1000);
</script>
</body>
</html>