js 倒计时的思路

最新推荐文章于 2024-02-05 14:23:50 发布

爱生活，爱编程

最新推荐文章于 2024-02-05 14:23:50 发布

阅读量554

点赞数

分类专栏： javascript基础笔记

本文链接：https://blog.csdn.net/qq_15009739/article/details/109766517

版权

javascript基础笔记专栏收录该内容

83 篇文章 1 订阅

订阅专栏

window.addEventListener("load", function() {

// 在这里写倒计时的effect

// 开始的时间

var firstTime = new Date(2020, 11, 18, 10, 34, 0);

// console.log(firstTime.getTime())

// 截止到指定的日期的毫秒数

var totalTimes = firstTime.getTime() + 24 * 60 * 60 * 1000;

// console.log(new Date(totalTimes));

// 每次定时执行的时候，就用截止时间-当前时间，就是还剩下多少毫秒数

var interId = setInterval(function() {

var residual = totalTimes - new Date().getTime();

console.log(new Date(residual))

// 当我们得到毫秒数之后，剩下的就是格式化显示的问题

}, 1000)

})

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js
    "></script>
    <style>
        a {
            display: inline-block;
            width: 50px;
            height: 50px;
            background-color: black;
            text-decoration: none;
            color: white;
            font-weight: 700;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>

<body>

    <a href="#">
        11
    </a>

    <a href="#">
        33
    </a>

    <a href="#">
        44
    </a>

    <script>
        window.addEventListener("load", function() {
            // 在这里写倒计时的effect
            var firstTime = new Date(2020, 11, 18, 10, 34, 0);
            // console.log(firstTime.getTime())
            var totalTimes = firstTime.getTime() + 24 * 60 * 60 * 1000;
            // console.log(new Date(totalTimes));

            var interId = setInterval(function() {
                    var residual = totalTimes - new Date().getTime();
                    // console.log(new Date(residual))
                    // 当我们得到毫秒数之后，剩下的就是格式化显示的问题

                    console.log(moment(residual).hour());
                    console.log(moment(residual).minute());
                    console.log(moment(residual).second());
                },
                1000)



        })
    </script>
</body>

</html>