简单计时器(面向对象)

整体实现效果

 1.JS代码

需要引入工具库，链接：http://t.csdn.cn/FbAbQ

<script src="js/utils.js"></script>
<script>
function Jishi(){
    this.biao=document.createElement('div')
    document.body.appendChild(this.biao)
    setStyle(this.biao,{
        width:'200px',
        height:'50px',
        border:'1px solid #333',
        font:'14px/50px ""'
    })
    
    let a=''
    a+=`
    <span>00</span>分
    <span>00</span>秒
    <span>00</span>毫秒
    `
    this.biao.innerHTML=a
    this.btn1=document.createElement('button')
    document.body.appendChild(this.btn1)
    this.btn1.innerText='开始'

    this.btn2=document.createElement('button')
    document.body.appendChild(this.btn2)
    this.btn2.innerText='暂停'
    
    this.minutes=this.biao.children[0]
    this.seconds=this.biao.children[1]
    this.miseconds=this.biao.children[2]
    this.addevent()
}

Jishi.prototype.addevent=function(){
    // let zong=0
    let haomiao=0
    let miao=0
    let fen=0
    let timer=null
    let flag1=1
    let flag2=1
    this.btn1.onclick=()=>{
        if(flag1==1){
            this.btn1.innerText='重置'
            flag1=2
            timer=setInterval(()=>{
            haomiao++
            if(haomiao==250){
                haomiao=0
                miao++
            }
            if(miao==60){
                miao=0
                fen++
            }
            this.seconds.innerText=miao
            this.miseconds.innerText=haomiao
            this.minutes.innerText=fen
        },1)
        }
        else if(flag1==2){
            this.btn1.innerText='开始'
            this.btn2.innerText='暂停'
            flag1=1
            flag2=1
            haomiao=0
            miao=0
            fen=0
            clearInterval(timer)
            for(let i=0;i<this.biao.children.length;i++){
                this.biao.children[i].innerText='00'
            }
        }
        
    }

    this.btn2.onclick=()=>{
        if(flag2==1&&flag1!=1){
            this.btn2.innerText='继续'
            clearInterval(timer)
            flag2=2  
        }
        
        else if(flag2==2&&flag1!=1){
            this.btn2.innerText='暂停'
            flag2=1
            timer=setInterval(()=>{
            haomiao++
            if(haomiao==250){
                haomiao=0
                miao++
            }
            if(miao==60){
                miao=0
                fen++
            }
            this.seconds.innerText=miao
            this.miseconds.innerText=haomiao
            this.minutes.innerText=fen
        },1)
        }
    }
}
new Jishi()
</script>