脚本宝典收集整理的这篇文章主要介绍了vue实现简易计时器组件，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
在做项目中难免会碰到需要实时刷新，广告动画依次出现等等需求，刚最近基于业务需求，需要实现一个累加通话时长的计时器，这时候就需要定时器登上我们的代码舞台了，其实对于计时器，它的原理就是通过定时器来实现的，那么在写业务需求之前，我先说说关于定时器的一些知识。
window对象提供了两个方法来实现定时器的效果，分别是window.setTimeout()和window.setInterval。
在Javascript中，代码一般都是同步执行的，但定时器却是异步执行的。
window.setTimeout(callback,delay); //callback:回调函数 delay：时间间隔时长 window.setInterval(callback,delay);
定时器分为隔时定时器setInterval和延时定时器setTimeout
那么它们两到底有什么区别呢？
了解了定时器的基本知识之后,那么接下来就可以进行功能的实现了。
HTML
<template>
<div class="timer">
<div>{{nowTime}}</div>
</div>
</template>
Javascript
<script>
export default {
name: 'Timer',
data () {
return {
timer: null,
nowTime:"",
hour: 0,
minutes: 0,
seconds: 0
}
},
created () {
this.timer = setInterval(this.startTimer, 1000);
},
destroyed () {
clearInterval(this.timer);
},
methods: {
startTimer () {
//建议开启定时器前，先清除定时器，避免定时器累加，出现不可预期的bug
if(this.timer) {
clearInterval(this.timer);
}
this.seconds += 1;
if (this.seconds >= 60) {
this.seconds = 0;
this.minutes= this.minutes+ 1;
}
if (this.minutes>= 60) {
this.minutes= 0;
this.hour = this.hour + 1;
}
this.nowTime = this.toZero(this.hour): this.toZero(this.minutes):this.toZero(this.seconds)
},
toZero(timeNumber) {
return timeNumber<10?"0"+timeNumber：timeNumber
},
}
}
</script>
这样，一个简单的计时器组件就实现好了，其实还有其他的实现思路，如果以后开发碰到了类似的需求，可以借鉴，希望对你们有所帮助。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本宝典。
以上是脚本宝典为你收集整理的vue实现简易计时器组件全部内容，希望文章能够帮你解决vue实现简易计时器组件所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。