百万前端之js倒计时功能

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)

实现效果：