js计时器 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <button class="start">开始</button>
        <button class="stop">暂停</button>
        <button class="end">结束</button>
        <h1>00:00:00</h1>
        <script type="text/javascript">
            let start = document.querySelector(".start")
            let stop = document.querySelector(".stop")
            let end = document.querySelector(".end")
            let h1 = document.querySelector("h1")
            let timer = null
            
            let miseconds = 0
            let seconds = 0
            let min = 0
            
            start.onclick = function(){
                clearInterval(timer);
                timer = setInterval(()=>{
                    let time = min+":"+seconds+":"+miseconds
                    miseconds+=1;
                    if(miseconds === 10){
                        miseconds=0;
                        seconds+=1;
                    }
                    else if(seconds === 60){
                        seconds=0;
                        min+=1
                    };
                    h1.innerHTML = time
                },100)
            }
                
            stop.onclick = function(){
                clearInterval(timer);
            }
            end.onclick = function(){
                min = 0
                seconds = 0
                miseconds = 0
                h1.innerHTML = min+":"+seconds+":"+miseconds
            }
        </script>
    </body>
</html>

 

posted @ 2021-07-29 11:18  邓居旺  阅读(47)  评论(0)    收藏  举报