JavaScript如何制作简单倒计时效果

最新推荐文章于 2023-02-07 15:51:45 发布

雀巢脆脆鲨-

最新推荐文章于 2023-02-07 15:51:45 发布

阅读量547

点赞数 8

文章标签：前端 javascript java

本文链接：https://blog.csdn.net/weixin_69761220/article/details/125508272

版权

1.核心算法∶输入的时间减去现在的时间就是剩余的时间，即倒计时，但是不能拿着时分相减，比如05分减去25分，结果会是负数的。
2用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。
3把剩余时间总的毫秒数转换为天、时、分、秒（时间戳转换为时分秒)
转换公式如下:
. d = parselnt(总秒数/60/60/24) ；计算天数
. h = parseInt(总秒数/60/60 %24)；计算小时
. m = parseInt(总秒数/60 %60)；计算分数
. s = parselnt(总秒数%60)；计算当前秒数

<!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>
        *{
            padding: 0;
            margin: 0;
        }
        div {
            width: 400px;
            margin: 100px auto;
        }
        /* 设置时分秒格子的样式 */
        span {
            display: block;
            width: 50px;
            height: 50px;
            background-color: black;
            color: white;
            font-size: 25px;
            text-align: center;
            line-height: 50px;
            margin-left: 5px;
            float: left;
        }
    </style>
</head>
<body>
    <div>
        <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 inputTime = +new Date('2022-7-1 18:00:00');
        countDown();
        setInterval(countDown, 1000); //设置定时器 每隔一秒调用一次函数 这样就能得到倒计时的效果
        function countDown() {
            var nowTime = +new Date(); // 返回的是当前时间的毫秒数
            var times = (inputTime - nowTime) /1000 // time是剩余时间的秒数  除1000是把毫秒数转化成秒数
            var h = parseInt(times/60/60%24); //时
            h = h < 10 ? '0'+h : h; //如果是单个数字的话，在就前面加个 0
            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;
        }
    </script>
</body>
</html>