1.实现效果
每隔一秒,更新一次时间。
2.实现思路
3.代码
<!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>倒计时效果</title>
<style>
.time {
width: 100px;
height: 30px;
}
.time li {
list-style: 'none';
display: inline-block;
width: 30px;
height: 30px;
background-color: black;
color: white;
text-align: center;
line-height: 30px;
}
</style>
</head>
<body>
<ul class = 'time'>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var lis = document.querySelectorAll('li');
// 先调用一次函数,防止第一次刷新有空白。
countdown();
setInterval(countdown, 1000);
function countdown() {
var nowTime = +new Date('2022-3-30 20:0:0');
var date = +new Date();
var ms = nowTime - date;//或者直接var ms = (nowTime - date)/1000,得到就是秒,否则得到是ms
var h = parseInt(ms/1000/60/60%24);
h = h<10?'0'+h:h;
var m = parseInt(ms/1000/60%60);
m = m<10?'0'+m:m;
var s = parseInt(ms/1000%60);
s = s<10?'0'+s:s;
lis[0].innerHTML = h;
lis[1].innerHTML = m;
lis[2].innerHTML = s;
}
</script>
</body>
</html>