vue组件里的倒计时定时器,vue倒计时组件

　　本文主要详细介绍vue实现简单定时器组件。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

　　在做项目的过程中，难免会有实时刷新、广告动画轮番出现等需求。最近，基于业务需要，有必要实现一个累计呼叫持续时间的计时器。这个时候定时器就有必要走上我们的代码舞台了。其实定时器的原理就是通过定时器来实现的。所以，在写业务需求之前，让我先讲一些关于定时器的知识。

　　Window对象提供了两种方法来实现timer的效果，即window.setTimeout()和window.setInterval

　　在Javascript中，代码一般是同步执行的，但是定时器却是异步执行的。

　　window.setTimeout(回调，延迟)；//回调：回调函数延迟：时间间隔持续时间

　　window.setInterval(回调，延迟)；

　　有定时器间隔定时器setInterval和延时定时器setTimeout。

　　那么它们之间有什么区别呢？

　　SetInterval以指定时间为周期执行，一般用于刷新表单和复杂动画。对于某些表单，实时指定时间会被刷新和同步。

　　SetTimeout仅在指定时间后执行一次。比如有些网站刚进入，就会出现弹窗广告。一般使用setTimeout。

　　了解了定时器的基本知识之后，那么功能就可以实现了。

　　超文本标记语言

　　模板

　　div class=计时器

　　div{{nowTime}}/div

　　/div

　　/模板

　　java描述语言

　　脚本

　　导出默认值{

　　名称：计时器，

　　data () {

　　返回{

　　计时器：空，

　　现在：，

　　小时：0，

　　分钟：0，

　　秒：0

　　}

　　},

　　已创建(){

　　this . timer=setInterval(this . start timer，1000)；

　　},

　　销毁(){

　　clear interval(this . timer)；

　　},

　　方法：{

　　startTimer () {

　　//建议在启动定时器之前将其清零，避免定时器的堆积和意外的bug。

　　if(this.timer) {

　　clear interval(this . timer)；

　　}

　　this . seconds=1；

　　if (this.seconds=60) {

　　this . seconds=0；

　　this . minutes=this . minutes 1；

　　}

　　如果(this.minutes=60) {

　　this . minutes=0；

　　这个. hour=这个. hour 1；

　　}

　　this . now time=this . to zero(this . hour):this . to zero(this . minutes):this . to zero(this . seconds)

　　},

　　toZero(时间编号){

　　返回timeNumber10？“0”时间编号：时间编号

　　},

　　}

　　}

　　/脚本

　　这样，将实现一个简单的定时器组件。其实还有其他的实现方式。如果在以后的开发中遇到类似的需求，可以借鉴一下。希望对你有帮助。

　　这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。