js制作简单倒计时-蒲公英云

js制作简单倒计时

た入场券 2023-06-16 08:29 98阅读 0赞

效果图

具体思路：
通过计算目标时间到目前时间的时间差，然后将时间差转化为时分秒，具体转化在代码中体现。

天：seconds/60/60/24
小时：seconds/60/60%24
分钟：seconds/60%60
秒：seconds%60

代码部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>倒计时</title>
        <style type="text/css">
            *{ 
                margin: 0;
                padding: 0;
            }
            #djs{ 
                width: 600px;
                display: block;
                margin: 0 auto;
                color: red;
                border: 1px solid red;
                text-align: center;
                font-size: 24px;
            }
        </style>
        <script type="text/javascript">
            window.onload = function(){ 
                setInterval(function(){ 
                    //获取当前时间的毫秒数
                    var nowTime = new Date();
                    var lastTime = new Date("2020-1-1 00:00:00");
                    //计算时间差
                    var ms = lastTime.getTime() - nowTime.getTime();
                    var seconds = parseInt(ms/1000);
                    //计算天
                    var day = parseInt(seconds/60/60/24);
                    //计算小时
                    var hour = parseInt(seconds/60/60%24);
                    //计算分钟
                    var min = parseInt(seconds/60%60);
                    //计算秒数
                    var miao = parseInt(seconds%60);
                    var djs = document.getElementById("djs");
                    djs.innerHTML = "距元旦还有 "+day + " 天 " + hour + " 小时" + min +" 分钟 " + miao + "秒";
                },1000)
            }
        </script>
    </head>
    <body>
        <p id="djs"></p>
    </body>
</html>