整体实现效果
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>