JS做倒计时的例题

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>倒计时</title>
        <script>
            function countTime(){     //函数countTime(时间差)
                var n = new Date();     //声明一个现在的时间    
                var now = n.getTime();     //声明一个变量，获取一下上面定义的时间
                
                var e = "2019/09/01 10:30:00";     //声明一个截止时间
                var endDate = new Date(e);     //声明一个变量，定义截止时间
                var end = endDate.getTime();     //声明变量，获取上面的截止时间

                var leftTime = end - now;     //用截止时间减去现在的时间
                
                var d, h, m, s;     //声明四个变量
                if (leftTime>=0){     //if条件语句
                    d = Math.floor(leftTime/1000/60/60/24);     //Math.floor返回小于或等于一个给定数字的最大整数。     //毫秒除以时间单位算出总天数
                    h = Math.floor(leftTime/1000/60/60%24);     //毫秒除以时间单位算出总小时数
                    m = Math.floor(leftTime/1000/60%60);     //毫秒除以时间单位算出总分钟数
                    s = Math.floor(leftTime/1000%60);     //毫秒除以时间单位算出总秒数
                }
                
                document.getElementById("_d").innerHTML = d + "天";     //span标签 id=_d获取元素，上面的计算结果连接单位"天"
                document.getElementById("_h").innerHTML = h + "时";     //span标签 id=_h获取元素，上面的计算结果连接单位"时"
                document.getElementById("_m").innerHTML = m + "分";     //span标签 id=_m获取元素，上面的计算结果连接单位"分"
                document.getElementById("_s").innerHTML = s + "秒";     //span标签 id=_s获取元素，上面的计算结果连接单位"秒"
                setTimeout(countTime,1000);     //添加定时事件：countTime函数和执行之前以及事件间隔的毫秒数
            }
            
        </script>
    </head>
    <body onload="countTime()">     <!--body页面，事件会在页面或图像加载完成后立即发生，引用countTime函数-->
        <h1>活动截止日期：9月1日上午十点半</h1>
        <h2>距离活动时间结束还有：</h2>
        <div>
            <span id="_d">00</span>
            <span id="_h">00</span>
            <span id="_m">00</span>
            <span id="_s">00</span>
        </div>
        <!--<p id="demo"></p>-->
    </body>
</html>
JS做倒计时的例题

猜你喜欢
