百万前端之js倒计时功能

最新推荐文章于 2023-09-08 11:48:28 发布

black spider

最新推荐文章于 2023-09-08 11:48:28 发布

阅读量412

点赞数 2

分类专栏： javascript 前端文章标签： javascript css 前端 html Powered by 金山文档

本文链接：https://blog.csdn.net/qsadmjn/article/details/128534546

版权

前端同时被 2 个专栏收录

7 篇文章 1 订阅

订阅专栏

javascript

6 篇文章 0 订阅

订阅专栏

文章介绍了如何使用JavaScript来创建一个倒计时器，主要步骤包括计算倒计时时间，转换时间单位，并通过更新DOM元素显示倒计时。示例代码展示了一个到2023年新年的倒计时，涉及到日期对象、时间戳以及每隔一秒更新显示的逻辑。

摘要由CSDN通过智能技术生成

js实现倒计时的方法很简单，基本的方法就是倒计时的结束时间减当前时间就是倒计时的时间了

通过js的内置函数获取时间并对时间进行处理，最后进行拼接插入就实现简单的倒计时功能了！

demo的css参考：

body{position: relative;}
    body>div{
        background-image: linear-gradient(to left,#b99552,#fc5531);
        width: 20vw;
        height:10vh;
        position: absolute;
        top: 10vh;
        left: 30%;
        color: beige;
        font-weight: bold;
        font-size: 1rem;
        line-height: 10vh;
        text-align: center;
        border-radius: 5px;
    }

demo的html参考：

<!-- 初始化默认为00秒 -->
<div id="countdown">00天00时00分00秒</div>

demo的js代码参考：

function dataTime(){
        // 获取到需要插入倒计时内容的div
        var countdown = document.getElementById('countdown');
        //通过内置时间函数实例化日期对象获取当前时间 new Date
        //time 为倒计时结束时间  .getTime()将时间转换成为毫秒级别的时间戳
        var time = new Date('2023-1-21 00:00:00').getTime();
        //获取当前时间nowTime
        var nowTime = new Date().getTime();
        //倒计时结束时间 - 当前时间 = 倒计时时间
        //再将倒计时时间转换为秒级别的时间戳
        var countdownTime = (time - nowTime) / 1000;
        //倒计时的天、时、分、秒分别为day,hour,min,sen
        //得到的值转换为整型parseInt
        var day = parseInt(countdownTime / 60 / 60 / 24);
        var honur = parseInt(countdownTime / 60 / 60 % 24);
        var min = parseInt(countdownTime / 60 % 60);
        var sen = parseInt(countdownTime % 60);
        //定义倒计时显示
        var timeShow = '距离新年还有：' + day + '天' + honur + '时' + min + '分' + sen + '秒';
        //通过innerText插入倒计时到div中显示
        countdown.innerText = timeShow;
        }
        //每秒执行一次倒计时方法
        setInterval(dataTime, 1000)

实现效果：