倒计时案例

最新推荐文章于 2024-04-23 21:46:50 发布

贾巨星

最新推荐文章于 2024-04-23 21:46:50 发布

阅读量255

点赞数 1

本文链接：https://blog.csdn.net/m0_60806965/article/details/127464998

版权

在这段学习中写一个倒计时的案例。下面跟着我一起来吧。

一、设置倒计时的基本样式

我们需要大的两部分:按钮和倒计时模块

代码可见：

<style>
        div{
            width: 500px;
            margin: 100px auto;
        }
        span{
            display: block;
            float: left;
            text-align: center;
            width: 40px;
            height: 40px;
            line-height: 40px;
            background-color: black;
            color: white;
            margin: 3px;
        }
        .zong{
            width: 132px;
            float: none;
        }
        button{
            border: 0px solid gray;
            background-color: aquamarine;
            color: rgb(15, 11, 6);
        }
</style>
<body>
    <div>
        <button>开始倒计时</button>
        <button>停止倒计时</button>
        <span class="zong"></span>
        <span class="hour"></span>
        <span class="minute"></span>
        <span class="second"></span>
    </div>
</body>

二、倒计时的算法部分

大致的思路就是，获取当前的时间，设置到达的时间，计算二者的毫秒数，以此来计算倒计时的时分秒。

代码如下：

var inputTime = +new Date('2022-10-23 18:00:00');
function refresh(){
            var nowTime = +new Date();             //获取当前时间
            var times = (inputTime - nowTime) / 1000;           //相差的毫秒数来计算相差的秒数
            var h = parseInt(times / 60 / 60);  //时
            h = h < 10 ? '0'+ h : h;
            hour.innerHTML = h;
            var m = parseInt(times / 60 % 60); //分钟 
            m = m < 10 ? '0'+ m : m;   
            minute.innerHTML = m;
            var s = parseInt(times % 60);       //秒
            s = s < 10 ? '0'+ s : s;
            second.innerHTML = s;
        }

三、进行定时器的设置

我们需要对计时器进行更新设置，在此次案例中，我们设置两种，一种是以秒为单位的倒计时，还有一种是以毫秒为单位的倒计时。所以我们需要设置两个定时器time1 和time2.

代码如下：

var time1 = null;
var time2 = null;
btn[0].addEventListener('click',function(){
     time1 = setInterval(refresh,1000);
     time2 = setInterval(haoMiao,1);
})

四、定时器的清除

我们设置了定时器的暂停按钮，所以就需要考虑定时器的清除问题，同时解决方案很简单，通过clearInterval（）来进行清除。

代码如下：

btn[1].addEventListener('click',function(){
            clearInterval(time1);
            clearInterval(time2);
  })

五、获取元素进行完善

代码如下：

var hour = document.querySelector('.hour');
var minute = document.querySelector('.minute');
var second = document.querySelector('.second');
var zong = document.querySelector('.zong');
var btn = document.querySelectorAll('button');

六、完整代码如下：

如有不解，欢迎评论区留言交流，能力不济，欢迎指正。

<!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>
        div{
            width: 500px;
            margin: 100px auto;
        }
        span{
            display: block;
            float: left;
            text-align: center;
            width: 40px;
            height: 40px;
            line-height: 40px;
            background-color: black;
            color: white;
            margin: 3px;
        }
        .zong{
            width: 132px;
            float: none;
        }
        button{
            border: 0px solid gray;
            background-color: aquamarine;
            color: rgb(15, 11, 6);
        }
    </style>
</head>
<body>
    <div>
        <button>开始倒计时</button>
        <button>停止倒计时</button>
        <span class="zong"></span>
        <span class="hour"></span>
        <span class="minute"></span>
        <span class="second"></span>
    </div>
    <script>
        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');
        var zong = document.querySelector('.zong');
        var btn = document.querySelectorAll('button');
        var inputTime = +new Date('2022-10-23 18:00:00');     //获取输入的时间
        refresh();
        haoMiao();
        var time1 = null;
        var time2 = null;
        btn[0].addEventListener('click',function(){
            time1 = setInterval(refresh,1000);
            time2 = setInterval(haoMiao,1);
        })
        btn[1].addEventListener('click',function(){
            clearInterval(time1);
            clearInterval(time2);
        })
        function refresh(){
            var nowTime = +new Date();             //获取当前时间
            var times = (inputTime - nowTime) / 1000;           //相差的毫秒数来计算相差的秒数
            var h = parseInt(times / 60 / 60);  //时
            h = h < 10 ? '0'+ h : h;
            hour.innerHTML = h;
            var m = parseInt(times / 60 % 60); //分钟 
            m = m < 10 ? '0'+ m : m;   
            minute.innerHTML = m;
            var s = parseInt(times % 60);       //秒
            s = s < 10 ? '0'+ s : s;
            second.innerHTML = s;
        }
        function haoMiao(){
            var nowTime = +new Date();
            var times = (inputTime - nowTime);
            zong.innerHTML = times;
        }
    </script>
</body>
</html>