vue实现倒计时功能,vue中使用定时器

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

　　本文分享vue实现定时器功能的具体代码，供大家参考。具体内容如下

　　首先，我们需要知道setTimeout和setInterval的区别

　　SetTimeout只在指定时间后执行一次，代码如下：

　　脚本

　　//计时器异步运行

　　函数hello(){

　　alert( hello )；

　　}

　　//使用方法名来执行方法

　　var t1=window.setTimeout(你好，1000)；

　　var t2=window.setTimeout(hello()，3000)；//使用字符串执行该方法

　　window . clear time out(t1)；//移除计时器

　　/脚本

　　SetInterval在指定的时间周期内执行，代码如下：

　　//实时刷新时间的单位是毫秒。

　　setInterval(refreshQuery()，8000)；

　　/*刷新查询*/

　　函数refreshQuery(){

　　$(#mainTable )。datagrid(reload ，null)；

　　}

　　通常，setTimeout用于延迟某个方法或函数的执行，

　　SetInterval一般用于刷新表单，对于某些表单，实时指定时间用于刷新同步。

计时器

　　HTML代码

　　div class=父亲

　　保险商实验所

　　li{{one}}span:/span/li

　　li{{two}}span:/span/li

　　李{ {三} }/李

　　/ul

　　El-button type= primary @ click= start handler start/El-button

　　El-button type= primary @ click= end handler pause/El-button

　　/div

　　JAVASCRIPT代码

　　脚本

　　导出默认值{

　　名称：“HelloWorld”，

　　data(){

　　返回{

　　标志：空，

　　一： 00 ，//小时

　　两个：“00”，//最小

　　三： 00 ，//秒

　　Abc: 0，//秒计数

　　CDE: 0，倒数//分钟

　　EFG: 0，计数为//

　　}

　　},

　　道具：{

　　消息：字符串

　　},

　　已安装(){

　　},

　　方法：{

　　//开始计时

　　startHandler(){

　　this.flag=setInterval(()={

　　if(this . three===60 this . three=== 60 ){

　　this.three= 00

　　this . ABC=0；

　　if(this . two===60 this . two=== 60 ){

　　this.two= 00

　　this . CDE=0；

　　if(this.efg 1=9){

　　this.efg

　　this . one= 0 this . EFG；

　　}否则{

　　this.efg

　　this . one=this . EFG；

　　}

　　}否则{

　　if(this.cde 1=9){

　　this.cde

　　this . two= 0 this . CDE；

　　}否则{

　　this.cde

　　this . two=this . CDE；

　　}

　　}

　　}否则{

　　if(this.abc 1=9){

　　this.abc

　　this . three= 0 this . ABC；

　　}否则{

　　this.abc

　　this . three=this . ABC；

　　}

　　}

　　},100)

　　},

　　//暂停计时

　　endHandler(){

　　this . flag=clear interval(this . flag)

　　}

　　}

　　}

　　/脚本

　　效果如下：

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

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