js的计时元素

Posted 2020-09-04 花落为谁惜

1.setInterval( )这是一个计数器函数，在相应的的事件内，会执行第一个参数的代码

     clearInterval( )这个函数可以；理解为一个时间的停止器

    <div  id="p"></div>
        <button id="btn" onclick="stop()">时间停止</button>
        <script>
            function demo(){
                var date=new Date();
                var t=date.toLocaleTimeString();
                document.getElementById("p").innerhtml=t;
            }
        var id=setInterval(demo(),1000);
        function  stop(){    
             if(id)
             clearInterval(id);
         }
        </script>

2.setTimeout():这也是一个计时的函数，只是他只能调用自身的函数才可以实现计时的效果

  clearTimeout():清除

    <div id="p"></div>

        <button id="btn" onclick="stop()">时间停止</button>
        <script>
            function demo(){
                var date=new Date();
                var t=date.toLocaleTimeString();
                document.getElementById("p").innerHTML=t;
            }
        var id=setTimeout(demo(),1000);
        function  stop(){    
             if(id)
             clearTimeout(id);
         }
        </script>