vue 实现一个简单倒计时功能

Elena_Lucky_baby

于 2024-05-17 16:19:13 发布

阅读量64

点赞数 1

文章标签： vue.js javascript 前端 html 前端框架

本文链接：https://blog.csdn.net/weixin_52493208/article/details/139007778

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>倒计时示例</title>
</head>
<body>
    <div id="countdown"></div>
    <script>
         //封装的方法
        function countdown() {

            // 设置倒计时的结束时间为未来某个时间
            var endTime = new Date("2023-12-31 23:59:59");

            // 每秒执行一次
            setInterval(function() {
                // 获取当前时间和结束时间的时间差
                var nowTime = new Date();
                var timeDiff = endTime.getTime() - nowTime.getTime();

                // 计算剩余时间
                var days = Math.floor(timeDiff / 1000 / 60 / 60 / 24);
                var hours = Math.floor((timeDiff / 1000 / 60 / 60) % 24);
                var minutes = Math.floor((timeDiff / 1000 / 60) % 60);
                var seconds = Math.floor((timeDiff / 1000) % 60);

                // 将剩余时间显示在页面上
                var countdownDiv = document.getElementById("countdown");
                countdownDiv.innerHTML = "距离2024年元旦还有：" + days + "天" + hours + "小时" + minutes + "分" + seconds + "秒";
            }, 1000);
        }

        // 页面加载完成后开始倒计时
        window.onload = function() {
            countdown();
        };
    </script>
</body>
</html>