倒计时效果
数字会随着时间不断变化
响应代码如下:
<!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>
span{
background-color: black;
font-size: 100px;
color:white;
}
</style>
</head>
<body>
<span class="hour">01</span>
<span class="minuate">01</span>
<span class="second">01</span>
<script>
var h=document.querySelector('.hour');
var m=document.querySelector('.minuate');
var s=document.querySelector('.second');
var inputTime=+new Date('2022-3-30 18:00:00');//返回用户输入的时间总毫秒数
setInterval(countDown,1000);
function countDown(){
var nowTime=+new Date();//返回当前时间总毫秒数
var times=(inputTime-nowTime)/1000;//times是剩余时间总秒数
var hour=parseInt(times/60/60);//计算小时数
hour=hour<10?'0'+hour:hour;
h.innerHTML=hour;
var minuate=parseInt(times/60%60);//计算分钟数
minuate=minuate<10?'0'+minuate:minuate;
m.innerHTML=minuate;
var second=parseInt(times%60);//计算秒数
second=second<10?'0'+second:second;
s.innerHTML=second;
}
</script>
</body>
</html>