JavaScript实现时间倒计时（圣诞倒计时）

最新推荐文章于 2023-08-14 09:55:32 发布

哎呦灬不错呦。

最新推荐文章于 2023-08-14 09:55:32 发布

阅读量684

点赞数

分类专栏： html5 JavaScript 前端文章标签： javascript

本文链接：https://blog.csdn.net/weixin_52583582/article/details/111600646

版权

html5 同时被 3 个专栏收录

37 篇文章 1 订阅

订阅专栏

前端

32 篇文章 0 订阅

订阅专栏

JavaScript

11 篇文章 1 订阅

订阅专栏

倒计时原理：时间差 = 目标(未来)时间-当前时间

目标(未来)时间可以随时改变，代码里面有显示的备注。
在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    .box{
        width: 520px;
        height: 80px;
        border-bottom: 2px solid pink;
        border-top: 2px solid pink;
        text-align: center;
        margin: 0 auto;
    }
    .box .hh{
        width: 100%;
        height: 30px;
        background-color: teal;
        line-height: 30px;
        margin-top: 1px;
        
    }
    .box span{
        display: inline-block;
        width: 40px;
        height: 40px;
        background: #f5004b;
        color: #ffffff;
        font-size: 18px;
        line-height: 40px;
        margin-top: 5px;
        margin-left: 5px;

    }
</style>
<body>

    <script>
        daojishi()
        setInterval(daojishi, 1000)

        function daojishi() {
            //1.获取当前时间
            var currentTime = new Date();
            //2.目标时间
            var targetTime = new Date("2020,12,25,0:0:0");
            
                //时间没到就一直执行，时间到了就显示else的内容。
            if ((targetTime - currentTime) >= 0) {
                //3.时间差  默认毫秒 /1000 变成秒，取整
                var time = parseInt((targetTime - currentTime) / 1000);

                /*
                m = s/60
                h = s/60/60
                t = s/60/60/24  =s/86400
                */
                var tian = parseInt(time / 86400);//天数
                var shi = parseInt(time % 86400 / 3600);//小时数
                var fen = parseInt(time % 3600 / 60);//分钟数
                var miao = time % 60;//秒数

                document.body.innerHTML = "<div class='box'>"+"<div class='hh'>距离平安夜：</div>" +"<span>" +fillZero(tian)+"</span>" + "天" + "<span>" +fillZero(shi) +"</span>"+ ":" +"<span>"+ fillZero(fen)+"</span>" + ":" + "<span>"+fillZero(miao)+"</span>" +"</div>";
            }else{
                document.body.innerHTML = "<div class='box'>"+"<div class='hh'>距离平安夜：</div>" +"<span>" +00+"</span>" + "天" + "<span>" + 00 +"</span>"+ ":" +"<span>"+ 00+"</span>" + ":" + "<span>"+00+"</span>" +"</div>";
                alert("圣诞快乐");
            }

        }

        function fillZero(num) {
            return num < 10 ? "0" + num : num
        }


    </script>
</body>

</html>

哎呦灬不错呦。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现时间倒计时（圣诞倒计时）

倒计时原理：时间差 = 目标(未来)时间-当前时间目标(未来)时间可以随时改变，代码里面有显示的备注。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&lt
复制链接

扫一扫