【JavaScript】11.JS实现简单的时分秒倒计时

短命女 2022-04-22 01:06 156阅读 0赞

![2018110111364350.png][]

![20181101113703360.png][]

代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>js简单时分秒倒计时</title>
        <script type="text/javascript">
            function countTime() {
                //获取当前时间
                var date = new Date();
                var now = date.getTime();
                //设置截止时间
                var endDate = new Date("2018-11-2 23:23:23");
                var end = endDate.getTime();
                //时间差
                var leftTime = end-now;
                //定义变量 d,h,m,s保存倒计时的时间
                var d,h,m,s;
                if (leftTime>=0) {
                    d = Math.floor(leftTime/1000/60/60/24);
                    h = Math.floor(leftTime/1000/60/60%24);
                    m = Math.floor(leftTime/1000/60%60);
                    s = Math.floor(leftTime/1000%60);
                }
                //将倒计时赋值到div中
                document.getElementById("_d").innerHTML = d+"天";
                document.getElementById("_h").innerHTML = h+"时";
                document.getElementById("_m").innerHTML = m+"分";
                document.getElementById("_s").innerHTML = s+"秒";
                //递归每秒调用countTime方法，显示动态时间效果
                setTimeout(countTime,1000);
            }
        </script>
     </head>
    <body onload = "countTime()">
    <div>
        <span id="_d">00</span>
        <span id="_h">00</span>
        <span id="_m">00</span>
        <span id="_s">00</span>
    </div>
    </body>
    </html>

[2018110111364350.png]: /images/20220422/23109cdcfad44727a0d27186baf755ab.png
[20181101113703360.png]: /images/20220422/9dbccaec9e174630aced66f9017c0438.png