js定时器实现倒计时小案例

最新推荐文章于 2024-01-24 10:54:12 发布

阿珍敲code

最新推荐文章于 2024-01-24 10:54:12 发布

阅读量2k

点赞数 4

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/dsadada23/article/details/126432039

版权

开发工具与关键技术： vscode /javascript

撰写时间:2022/8/19

案例介绍

倒计时是网页中经常看到的一个小功能，其实也很简单，掌握了js的日期对象就能写出来了，注意获取时分秒的计算公式就好了。那就直接开始吧

HTML代码

在页面上居中和文字对齐的样式

 div {
            /* 倒计时小案例 */
            /* div居中 */
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            /* 文字居中对齐 */
            text-align: center;
            line-height: 80px;
            width: 200px;
            height: 80px;
            font-size: 34px;
            background-color: rgb(41, 41, 212);
            color: #fff;
        }

div标签

<body>
    <div id="showTime"></div>
</body>

JS代码

先了解一下setInterval 间隔定时器的的基本用法

setInterval(function(){//间隔1000毫秒就执行一次函数

code...

},1000)//毫秒数==1秒钟

注意：改案例只计算了小时分钟和秒数

思路：1.获取到倒计时的时间和当前系统时间

2.用倒计时时间减去当前系统时间获得一个毫秒数

3.根据公式获得小时数、分钟数、和秒数

4.计算后打印在div标签里面

 //间隔定时器,每隔一定的时间就触发一次
    setInterval(() => {
        //获取倒计时
        var ddate = new Date('2022-08-19 22:00');
        //获取系统的当前时间
        var date = new Date();
        //相减除1000取得总秒数
        var ndate = (ddate - date) / 1000;
        //对取得的秒数求得小时数 
        var shi = parseInt(ndate / 60 / 60 % 24);
        //为了更好看，如果小时数是一位数，在前面添加0
        shi < 10 ? shi = '0' + shi : shi;
        //对取得的秒数求得分钟数 
        var fen = parseInt(ndate / 60 % 60);
        //为了更好看，如果分钟数是一位数，在前面添加0
        fen < 10 ? fen = '0' + fen : fen;
        //求得秒数
        var miao = parseInt(ndate % 60);
        //为了更好看，如果秒数是一位数，在前面添加0
        miao < 10 ? miao = '0' + miao : miao;
        //输出的格式赋值给times;
        var times = shi + ":" + fen + ":" + miao;
        //把结果打印到div的里面
        var showTime = document.getElementById('showTime').innerHTML = times;
    }, 1000);//定时刷新时间设置为1000毫秒

运行结果