具体代码入下:
<style>
div{
width: 200px;
height: 300px;
background-color: #f3313b;
margin: 40px auto;
}
span{
display: inline-block;
width: 60px;
height: 60px;
background-color: black;
margin-top: 200px;
margin-left: 3px;
color: white;
text-align: center;
line-height: 60px;
font-size: 24px;
font-weight: 800;
}
ul{
padding-left: 680px;
}
</style>
<div>
<span class="xs">01</span>
<span class="fz">23</span>
<span class="ml">10</span>
</div>
<ul>
<button class="begin">开启定时器</button>
<button class="end">关闭定时器</button>
</ul>
<script>
var xs=document.querySelector('.xs');
var fz=document.querySelector('.fz');
var ml=document.querySelector('.ml');
var begin=document.querySelector('.begin');
var end=document.querySelector('.end');
var timer=null;
var inputTime=+new Date('2021-6-10 15:00:00');
function countDown(){
var nowTime=+new Date();
var times=(inputTime-nowTime)/1000;
var h=parseInt(times / 60 / 60 % 24);
h=h<10?'0'+h:h;
xs.innerHTML=h;
var m=parseInt(times/60%60);
m=m<10?'0'+m:m;
fz.innerHTML=m;
var s=parseInt(times%60);
s=s<10?'0'+s:s;
ml.innerHTML=s;
}
begin.addEventListener('click',function () {
countDown();
timer=setInterval(countDown,1000);
})
end.addEventListener('click',function () {
clearInterval(timer);
})
</script>
效果图如下:
然后讲一下大致的实现思路,html布局很简单,我的样式可能比较难看,大家可以在css中调成自己喜欢的样式。主要实现都是js来完成的,就重点讲一下js的实现:
在
在countDown()函数中
var inputTime=+new Date('2021-6-10 15:00:00');
inputTime用来获取你输入的时间。
var nowTime=+new Date();
nowTime用来获取当前系统的时间,单位都是ms
var times=(inputTime-nowTime)/1000;
times得到的是时间差,单位转化成s
var h=parseInt(times / 60 / 60 % 24);
h=h<10?'0'+h:h;
xs.innerHTML=h;
var m=parseInt(times/60%60);
m=m<10?'0'+m:m;
fz.innerHTML=m;
var s=parseInt(times%60);
s=s<10?'0'+s:s;
ml.innerHTML=s;
然后讲过上面的计算分别得到小时、分钟和秒数,然后通过innerHtml来修改盒子中的数值。
begin.addEventListener('click',function () {
countDown();
timer=setInterval(countDown,1000);
})
end.addEventListener('click',function () {
clearInterval(timer);
})
然后分别注册点击事件来实现。
setInterval(countDown,1000);这个函数的就是每隔一秒钟执行一次countDown函数。
另外,按钮功能是我后来加上的。一般可能都不需要按钮,下面是没有按钮的代码:
<style>
div{
width: 200px;
height: 300px;
background-color: #f3313b;
margin: 40px auto;
}
span{
display: inline-block;
width: 60px;
height: 60px;
background-color: black;
margin-top: 200px;
margin-left: 3px;
color: white;
text-align: center;
line-height: 60px;
font-size: 24px;
font-weight: 800;
}
</style>
<div>
<span class="xs">01</span>
<span class="fz">23</span>
<span class="ml">10</span>
</div>
<script>
var xs=document.querySelector('.xs');
var fz=document.querySelector('.fz');
var ml=document.querySelector('.ml');
var timer=null;
var inputTime=+new Date('2021-6-10 15:00:00');
function countDown(){
var nowTime=+new Date();
var times=(inputTime-nowTime)/1000;
var h=parseInt(times / 60 / 60 % 24);
h=h<10?'0'+h:h;
xs.innerHTML=h;
var m=parseInt(times/60%60);
m=m<10?'0'+m:m;
fz.innerHTML=m;
var s=parseInt(times%60);
s=s<10?'0'+s:s;
ml.innerHTML=s;
}
countDown();
timer=setInterval(countDown,1000);
</script>
以上就是页面倒计时的具体实现方法,欢迎大家讨论和指正!