摘要:在这个案例中,利用定时器setInterval()实现倒计时
<!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>
* {
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
float: left;
margin: 10px 10px;
background-color: pink;
text-align: center;
line-height: 100px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="hour">1</div>
<div class="minute">2</div>
<div class="second">3</div>
</body>
<script>
var hour=document.querySelector('.hour');
var minute=document.querySelector('.minute');
var second=document.querySelector('.second');
var inputTime=+new Date('2022-1-17 20:40:00');
countDown();
function countDown(){
var nowTime=+new Date();
var times=(inputTime-nowTime)/1000;
var h=parseInt(times/60/60%24);
h=h<10?'0'+h:h;
hour.innerHTML=h;
var m=parseInt(times/60%60);
m=m<10?'0'+m:m;
minute.innerHTML=m;
var s=parseInt(times%60);
s=s<10?'0'+s:s;
second.innerHTML=s;
}
setInterval(countDown,1000);
</script>
</html>