JS鼠标第一次点击执行事件A再次点击执行事件B_js 双点击事件,第一次执行完成后再执行第二次-CSDN博客

本文链接：https://blog.csdn.net/qq_41205754/article/details/104893580

页面打开的样式
在这里插入图片描述
点击开始后，秒表开始运动，开始按钮上的文字变为重置，点击重置，秒表也会重置；

点击暂停，秒表暂停，文字变为继续，点击继续按钮，秒表继续运动；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 100px;
            margin: 20px 20px;
        }
        .cont{
            border: 1px solid #000;
            display: flex;
            line-height: 60px;
        }
        button{
            width: 50px;
            height: 30px;
        }
        h4{
            font-weight: normal;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="cont">
            <h4 class="s">00</h4>
            小时&nbsp;
            <h4 class="f">00</h4>
            分&nbsp;
            <h4 class="m">00</h4>
            秒&nbsp;
            <h4 class="hm">00</h4>
            毫秒
        </div>
        <button class="btn1">开始</button>
        <button class="btn2">暂停</button>
    </div>
</body>
<script>
    function Clock(){
        this.s=document.querySelector(".s");
        this.f=document.querySelector(".f");
        this.m=document.querySelector(".m");
        this.hm=document.querySelector(".hm");
        this.btn1=document.querySelector(".btn1");
        this.btn2=document.querySelector(".btn2");
        this.timer;
        this.ss=0;
        this.ff=0;
        this.mm=0;
        this.ms=0;
        this.flag=true;
        this.flag2=true;

        this.start()
        this.stop()
    }

    Clock.prototype.stop=function(){
        this.btn2.onclick=()=>{
        if(this.flag2){
                 this.flag2=false
                clearInterval(this.timer)
                this.btn2.innerText="继续"
        }else{
            this.flag2=true
            this.btn2.innerText="暂停"
            this.timemove()
        }
    }
    }
    Clock.prototype.start=function(){
        this.btn1.onclick=()=>{

            if(this.flag){
                console.log("第一次");
                 this.flag=false
                 this.btn1.innerText="重置"
                 this.timemove()
                //
                 
            }else{
                console.log("第二次");
                this.flag=true
                this.btn1.innerText="开始"
                clearInterval(this.timer);
                this.ss=0;
                this.ff=0;
                this.mm=0;
                this.ms=0;
                this.hm.innerText="00"
                this.m.innerText="00"
                this.f.innerText="00"
                this.s.innerText="00"
            }
        }
    }
    
    Clock.prototype.timemove=function(){
        this.timer=setInterval(()=>{
                    this.ms++;
                    this.hm.innerText=this.ms
                    if(this.ms>=999){
                        this.ms=0;
                        this.mm++
                    }

                    if(this.mm<10){
                        this.m.innerText="0"+this.mm
                    }else{
                        this.m.innerText=this.mm
                    }
                    if(this.mm==59){                
                        this.ff++
                        this.mm=0
                    }

                    if(this.ff<10){
                        this.f.innerText="0"+this.ff
                    }else{
                        this.f.innerText=this.ff
                    }
                    if(this.ff==59){                
                        this.ss++
                        this.ff=0
                    }
                    if(this.ss<10){
                        this.s.innerText="0"+this.ss
                    }else{
                        this.s.innerText=this.ss
                    }
                },4)
    }
    
    var clock=new Clock()
    console.log(clock);
    

</script>
</html>