<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
#app{
display: flex;
width: 260px;
background: red;
height: 100px;
margin: 50px auto;
text-align: center;
}
h1{
padding: 30px;
margin: 0 8px 0 8px;
background: #333;
color: white;
}
</style>
<body>
<div id="app">
<h1 class="hous"></h1>
<h1 class="min"></h1>
<h1 class="sec"></h1>
</div>
<script>
function repairZero(val){
return val<10?'0'+val:val;
}
let $=e=>{return document.querySelector(e)};
let time_=new Date("2020-2-19 0:20:40");
// 设置倒计时时间点
let timer=setInterval(function(){
let totalT=Math.floor((time_-new Date)/1000)
// 获取倒计时时间距离当前时间差值
let min_=Math.floor(totalT/60)
// 获取倒计时一共花多少分钟
let hous=Math.floor(min_/60)
// 获取倒计时多少小时
sec=totalT%60
// 获取倒计时秒
let minute=min_%60;
// 倒计时分，每隔60秒
if(sec<=0&&minute<=0&&hous<=0){
clearInterval(timer)
// 如果时分秒都小于等于0则时间停止
document.body.style.background="orange"
}
$('.hous').innerHTML=repairZero(hous)
// dom输出到页面上去
$('.min').innerHTML=repairZero(minute);
$('.sec').innerHTML=repairZero(sec);
},1000)
</script>
</body>
</html>
————————————————————写的不好，仅供参考
网友评论