<!DOCTYPE html>
<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>
</head>
<style>
.box {
display: flex;
padding: 20px 20px;
}
.hour {
width: 40px;
height: 40px;
color: #fff;
text-align: center;
line-height: 40px;
font-size: 20px;
background-color: black;
margin: 0 5px;
}
.minutes {
width: 40px;
height: 40px;
color: #fff;
text-align: center;
line-height: 40px;
font-size: 20px;
background-color: black;
margin: 0 5px;
}
.select {
width: 40px;
height: 40px;
color: #fff;
text-align: center;
line-height: 40px;
font-size: 20px;
background-color: black;
margin: 0 5px;
}
</style>
<body>
<div class="box">
<div class="hour">
</div>
<h2>时</h2>
<div class="minutes">
</div>
<h2>分</h2>
<div class="select">
</div>
<h2>秒</h2>
</div>
<script>
let h = document.querySelector('.hour');
let m = document.querySelector('.minutes');
let s = document.querySelector('.select');
var lasttime = new Date('2022-5-7 18:00:00')
function cutdown () {
var nowtime = new Date();
// 计算时间毫秒差 将来的毫秒差 减去 现在的毫秒差 得到总的毫秒差
var ms = lasttime.getTime() - nowtime.getTime();
//转换成秒 方便计算
var seconds = parseInt(ms / 1000);
// 计算天
var day = parseInt(seconds / 60 / 60 / 24);
day = day < 10 ? '0' + day : day;
// 计算时
var hs = parseInt(seconds / 60 / 60 % 24);
hs = hs < 10 ? '0' + hs : hs;
h.innerHTML = hs;
//计算分钟
var ms = parseInt(seconds / 60 % 60);
ms = ms < 10 ? '0' + ms : ms;
m.innerHTML = ms;
//计算秒
var ss = parseInt(seconds % 60);
ss = ss < 10 ? '0' + ss : ss;
s.innerHTML = ss;
}
cutdown();//先调用一次,防止刷新有空白
setInterval(cutdown, 1000)
</script>
</body>
</html>
js实现倒计时效果
于 2022-05-07 16:59:09 首次发布