关于js的定时器以及倒计时（本文部分转摘）

简单的时间倒计时

<html>  
<head>  
    <meta charset="UTF-8">  
    <title>js简单时分秒倒计时</title>  
    <script type="text/javascript">  
        function countTime() {  
            //获取当前时间  
            var date = new Date();  
            var now = date.getTime();  
            //设置截止时间  
            var str="2017/5/17 00:00:00";
            var endDate = new Date(str); 
            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>

2：设置天数

<html>  
<head>  
    <meta charset="UTF-8">  
    <title>js简单时分秒倒计时</title>  
    <script type="text/javascript">  
        function countTime() {  
            //获取当前时间  
            var date = new Date();  
            var now = date.getTime();  
            //设置截止时间  
            var str="2017/5/17 00:00:00";
            var endDate = new Date(str); 
            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>

转摘自 https://www.cnblogs.com/heizai002/p/6862418.html 感谢参考
3：关于定时器
js 定时器有以下两个方法：
setTimeout(function, milliseconds)在等待指定的毫秒数后执行函数。
setInterval(function, milliseconds)等同于 setTimeout()，但持续重复执行该函数。
setTimeout() 和 setInterval() 都属于 HTML DOM Window 对象的方法。
setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
setTimeout() ：在指定的毫秒数后调用函数或计算表达式语法setTimeout(function, milliseconds);。
第一个参数是要执行的函数。
第二个参数指示执行之前的毫秒数。
setInterval()语法setInterval(code,millisec,lang)

----实例

<html>
    <head></head>
    <body>
        <p id="timer">点击开始计时！</p>
        <div>
            <button id="cutTimer" onclick="start()">开始</button>
            <button id="cutTimer" onclick="stop()">停止</button>
        </div>
        <script>
            var cutT = document.getElementById("cutTimer");
        
            var timer1 = null;
        
            function start(){
                var countTime = function(){
                    date = new Date();
                    dateStr = date.toLocaleTimeString();
                    document.getElementById("timer").innerHTML = dateStr;
                }
            
                timer1 = window.setInterval(countTime,1000);
                        
            }

            
            function stop(){    
                console.log("timer stop:"+timer1);
                window.clearInterval(timer1);                    
            };

        </script>
    </body>
</html>

----实例二 setTimeout() ；

<body>
        <input type="text" value="0" id="time"/>
        <input type="button" value="开始"  onclick="timecount()" id="timesum" />
        <input type="button" value="暂停" onclick="timestop()" />
        <script>
            var timeCount = 0;
            function timecount(){
                document.getElementById("time").value = timeCount;
                timeCount++;
                setTimeout("timecount()",1000); 
            }
            function timestop(){
                clearTimeout(timeCount);  //停止当前计时
                document.getElementById("timesum").value = "继续计时"
            }
        </script>
    </body>

setInterval（）；
语法`setInterval(function, milliseconds);
第一个参数是要执行的函数。
第二个参数每个执行之间的时间间隔的长度。
----实例三setInterval（）

<html>
    <head></head>
<body>
<input type="text" value="0" id="time"/>
        <input type="button" value="开始"  onclick="setcount()" id="timesum" />
        <input type="button" value="暂停" onclick="setstop()" />
    
<script>
    var timecount = 0;
    function setcount(){
        document.getElementById("time").value =timecount;
        timecount++;    
    }
    var time = setInterval("setcount()", 1000);
    function setstop(){
        clearInterval(time);
    } 
        
</script>
    </body>
</html>

其两个方法都不可带 window 前缀来写
小生在网上搜索相关资料是发现简书的一位博主写的很好话不多说上链接
https://www.jianshu.com/p/5bbe3d12bb47
另外跟多相关js定时器的知识可参考W3cSchool以及js菜鸟教程中的js定时器

关于js的定时器以及倒计时（本文部分转摘）

猜你喜欢