js简单时分秒毫秒倒计时

效果图
这里写图片描述

直接copy就能运行

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>js时分秒毫秒倒计时</title>
    </head>
    <body>
        <div>
            <span id="_d">00</span>
            <span id="_h">00</span>
            <span id="_m">00</span>
            <span id="_s">00</span>
            <span id="_ms">00</span>
        </div>
        <script type="text/javascript">
            function countTime() {
                var date = new Date();
                var now = date.getTime();               
                var endDate = new Date("2017-10-01 00:00:00");//设置截止时间
                var end = endDate.getTime();
                var leftTime = end - now; //时间差                              
                var d, h, m, s, ms;
                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);
                    ms = Math.floor(leftTime % 1000);
                    if(ms < 100) {
                        ms = "0" + ms;
                    }
                    if(s < 10) {
                        s = "0" + s;
                    }
                    if(m < 10) {
                        m = "0" + m;
                    }
                    if(h < 10) {
                        h = "0" + h;
                    }
                } else {
                    console.log('已截止')
                }
                //将倒计时赋值到div中
                document.getElementById("_d").innerHTML = d + "天";
                document.getElementById("_h").innerHTML = h + "时";
                document.getElementById("_m").innerHTML = m + "分";
                document.getElementById("_s").innerHTML = s + "秒";
                document.getElementById("_ms").innerHTML = ms + "毫秒";
                //递归每秒调用countTime方法，显示动态时间效果
                setTimeout(countTime, 50);
            }

            countTime();
        </script>
    </body>
</html>

固定时间差实现方法（时间轮巡 ）

[javascript]view plain copy
var cha;    
        var toTime = new Date('2018/05/13 17:17:00');  ////iphone下时间固定为这个格式否则会发生错误    
        function dateDown(cha){    
            var h = Math.floor(cha / 1000 / 60 / 60 % 24);     
            // var m = Math.floor(cha - Math.floor(cha/1000/60/60));    
            var m = Math.floor(cha / 1000 / 60 % 60);    
            var s = Math.floor(cha / 1000 % 60);    
            var ms = (cha%1000+'').slice(0,2);    
            // console.log(document.getElementById("time"))    
            if(h<0){h="00";}    
            if(m<0){m="00"}    
            if(s<0){s="00"}    
            if(ms<0){ms="00"}    
            if(h<10){h="0"+h;}    
            if(m<10){m="0"+m;}    
            if(s<10){s="0"+s;}    
            if(ms<10){ms="0"+ms;}    
            document.getElementById("time").innerHTML ="===="+ h+'：'+m +':'+s+':'+ ms;    
            // console.log(cha)    
        }    
        function timeCalc(toTime){  
            var now = new Date();    
            cha= toTime - now;  
            if(cha<=0 || !cha){  
                var newCha = Math.ceil((now*1 - toTime*1)/(1000*60*60*24))  
                toTime =toTime*1 + 24*60*60*1000 * newCha  
            }  
            console.log(toTime)  
            console.log(now*1)  
            cha= toTime - now;  
  
            return cha;  
        }  
        setInterval(function(){    
              
            dateDown(timeCalc(toTime))     
        },100)    

js简单时分秒毫秒倒计时

js简单时分秒毫秒倒计时

猜你喜欢