1.倒计时效果
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
<title>Page Title</title>
</head>
<body>
<div class="wrap">
<div class="over">本场距离结束还剩</div>
<div class="time">
<span class="hour"></span>:
<span class="minute"></span>:
<span class="second"></span>
</div>
</div>
<script>
let hour = document.querySelector('.hour');
let minute = document.querySelector('.minute');
let second = document.querySelector('.second');
let inputTime = +new Date('2022-5-1 24:00:00');
function countDown() {
let nowTime = +new Date();
let times = (inputTime - nowTime) / 1000;
let h = parseInt(times / 60 / 60 % 24);
h = h < 10 ? '0' + h : h;
hour.innerHTML = h;
let m = parseInt(times / 60 % 60);
m = m < 10 ? '0' + m : m;
minute.innerHTML = m;
let s = parseInt(times % 60);
s = s < 10 ? '0' + s : s;
second.innerHTML = s;
}
setInterval(countDown, 1000);
</script>
</body>
</html>
网友评论