JavaScript7——页面倒计时效果的实现

具体代码入下：

<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>

以上就是页面倒计时的具体实现方法，欢迎大家讨论和指正！