HTML代码
<div>
<p>
剩余
<span class="hour"></span>
时
<span class="minute"></span>
分
<span class="coned"></span>
秒
</p>
</div>
CSS代码
<style>
div{
width: 400px;
height: 200px;
margin: 100px auto;
background: pink;
padding-top: 100px;
}
div>p{
width: 300px;
height: 40px;
margin: 0px auto;
font-size: 16px;
}
div>p>span{
display: inline-block;
width: 40px;
height: 40px;
font-size: 16px;
line-height: 40px;
text-align: center;
background: black;
color: white;
}
</style>
JS代码
//获取元素
let hour=document.querySelector('.hour');
let minute=document.querySelector('.minute');
let coned=document.querySelector('.coned');
let inputTime= +new Date("2022-8-20 8:00:00");//设置未来的时间
//获取时 分 秒
function shijian(){
let newTime= + new Date();//获取当前总的毫秒数
let times= (inputTime-newTime) /1000 //获取剩余总的毫秒数
let h = parseInt(times/60/60%24);//获取当前小时
h = h<10 ? '0' + h : h;//当小时数小于10的时候在前面加个0
hour.innerHTML=h;//把获取的小时数传到页面
let m=parseInt(times/60%60);//获取当前分钟
m= m<10 ? '0' + m:m;//当分钟数小于10的时候在前面加个零
minute.innerHTML=m;//把获取的分钟传到页面
let c=parseInt(times%60)//获取当前秒数
c = c<10 ? '0' + c:c;//当秒数小于10在前面加个0
coned.innerHTML=c;//把获取的秒数传到页面
}
setInterval(shijian,1000)//开启定时器每秒
效果图