js计时器①setInterval②setTimeout

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>计时器</title>
    <style type="text/css">
        .one{
            border: 2px solid;
            height: 200px;
            width: 400px;
            margin: 0 auto;
            margin-bottom: 20px;
        }
        .one p{
            width: 300px;
            height: 60px;
            border: 2px pink solid;
            margin: 0 auto;
            font-size: 50px;
            text-align: center;
            margin-bottom: 20px;
        }

    </style>
</head>
<body>
    <div class="one">
        <h2>setInterval计时器</h2>
        <p id="po"></p>     
           <button onclick="timeCount()">start</button>
           <button onclick="stopCount()">stop</button>
        </div>

    <div class="one">
        <h2>setTimeout计时器</h2>
        <p id="pp"></p>        
           <button onclick="jishi()">start</button>
           <button onclick="bujishi()">stop</button>        
    </div>




    <script type="text/javascript">
     // setInterval计时器
       var po=document.getElementById('po');
       var n=0;
       var m=0;
       var f=0;
       var ff=0;
       var timert=null;
       function timeCount(){
        clearInterval(timert);
        timert=setInterval(
          function(){
             n=n+1;
             f=n/60;
             ff=parseInt(f) 
             m=n%60;
             po.innerHTML=ff+"分"+m;
          },1000);
       }
       function stopCount(){
        clearInterval(timert);
       }






    // setTimeout计时器
        var pp=document.getElementById('pp');
        var x=0;
        var timer=null;
        function jishi(){
            clearTimeout(timer);
            x+=1;
            timer=setTimeout("jishi()",1000);
            pp.innerHTML=x;
        }
        function bujishi(){
            clearTimeout(timer);

        }
    </script>

</body>
</html>
js计时器①setInterval②setTimeout

猜你喜欢
