html使用vue实现秒表,vue中使用时间计时器

vue中我们会使用各种倒计时的方法这里就为大家提供一个计时器的方法，

话不多说代码走起：

点击

暂停

重置

继续

{{str}}

export default {

name:"homepages.vue",

data() {

return {

hour:0,//定义时，分，秒，毫秒并初始化为0；

minute:0,

ms:0,

second:0,//秒

time:'',

str:'',

data: {

name:10,

age:20,

}

}

},

methods: {

timeStart(){

this.time =setInterval(this.timer,50)

},

timer () {//定义计时函数

this.ms =this.ms +50 //毫秒

if (this.ms >=1000) {

this.ms =0

this.second =this.second +1 //秒

}

if (this.second >=60) {

this.second =0

this.minute =this.minute +1 //分钟

}

if (this.minute >=60) {

this.minute =0

this.hour =this.hour +1 //小时

}

this.str =this.toDub(this.hour) +':' +this.toDub(this.minute) +':' +this.toDub(this.second)/*+""+this.toDubms(this.ms)+"毫秒"*/

// document.getElementById('mytime').innerHTML=h+"时"+m+"分"+s+"秒"+ms+"毫秒";

},

toDub (n) {//补0操作

if (n <10) {

return '0' + n

}else {

return '' + n

}

},

stop () {

console.log('暂停')

clearInterval(this.time)

},

reset () {//重置

clearInterval(this.time)

this.hour =0

this.minute =0

this.ms =0

this.second =0

this.str ='00:00:00'

}

}

}