计算到下课还有多少时间
事件戳
全部代码
<!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>
<style>
.countdown {
width: 240px;
height: 305px;
text-align: center;
line-height: 1;
color: #fff;
background-color: brown;
/* background-size: 240px; */
/* float: left; */
overflow: hidden;
position: relative;
}
.countdown .next {
font-size: 16px;
margin: 25px 0 14px;
}
.countdown .title {
font-size: 33px;
}
.countdown .tips {
margin-top: 80px;
font-size: 23px;
}
.countdown small {
font-size: 17px;
}
.countdown .clock {
width: 142px;
margin: 18px auto 0;
overflow: hidden;
}
.countdown .clock span,
.countdown .clock i {
display: block;
text-align: center;
line-height: 34px;
font-size: 23px;
float: left;
}
.countdown .clock span {
width: 34px;
height: 34px;
border-radius: 2px;
background-color: #303430;
}
.countdown .clock i {
width: 20px;
font-style: normal;
}
.countdown .newElement {
position: absolute;
bottom: 50px;
text-align: center;
width: 240px;
}
</style>
</head>
<body>
<div class="countdown">
<p class="next">今天是2222年2月22日</p>
<p class="title">下班倒计时</p>
<p class="clock">
<span id="hour">00</span>
<i>:</i>
<span id="minutes">25</span>
<i>:</i>
<span id="scond">20</span>
</p>
<p class="tips">
现在是18:30:00
</p>
</div>
<script>
// 获取标签
let hour = document.querySelector('#hour');
let mintes = document.querySelector('#minutes');
let scond = document.querySelector('#scond');
// 开启定时器
getTime()
let timer = setInterval(getTime, 1000);
function getTime() {
// 获取15:30到现在的时间戳差值
let now = +new Date();
let happy = +new Date('2021-10-9 15:54:00');
// 换算成秒
let time = (happy - now) / 1000;
console.log(time);
if (time < 0) {
clearInterval(timer);
let newElemen = document.createElement('p');
newElemen.innerHTML = '可以去干饭了!';
newElemen.className = 'newElement';
document.querySelector('div').insertBefore(newElemen, document.querySelector('.tips'));
} else {
let h = parseInt(time / 60 / 60 % 24)
let m = parseInt(time / 60 % 60)
let s = parseInt(time % 60)
hour.innerHTML = h;
mintes.innerHTML = m;
scond.innerHTML = s;
}
}
</script>
</body>
</html>