• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

使用vue实现计时器功能

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文实例为大家分享了vue实现计时器功能的具体代码,供大家参考,具体内容如下

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

setTimeout只在指定时间后执行一次,代码如下:

<script>  
//定时器 异步运行  
function hello(){  
alert("hello");  
}  
//使用方法名字执行方法  
var t1 = window.setTimeout(hello,1000);  
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法  
window.clearTimeout(t1);//去掉定时器  
</script>

setInterval以指定时间为周期循环执行,代码如下:

//实时刷新时间单位为毫秒  
setInterval('refreshQuery()',8000);   
/* 刷新查询 */  
function refreshQuery(){  
   $("#mainTable").datagrid('reload',null);  
}

一般情况下setTimeout用于延迟执行某方法或功能,
setInterval则一般用于刷新表单,对于一些表单的实时指定时间刷新同步

计时器

HTML代码

<div class="father">
  <ul>
   <li>{{one}}<span>:</span></li>
   <li>{{two}}<span>:</span></li>
   <li>{{three}}</li>
  </ul>
  <el-button type="primary" @click="startHandler">开始</el-button>
  <el-button type="primary" @click="endHandler">暂停</el-button>
</div>

JAVASCRIPT代码

<script>
export default {
  name: 'HelloWorld',
  data(){
   return {
  flag: null,
  one : '00', // 时
  two : '00', // 分
  three : '00', // 秒
  abc : 0, // 秒的计数
  cde : 0, // 分的计数
  efg : 0, // 时的计数
   }
  },
  props: {
    msg: String
  },
  mounted() {
   
  },
  methods:{
  // 开始计时
 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;
     }else{
      this.efg++;
      this.one = this.efg;
     }
    }else{
     if(this.cde+1 <= 9){
      this.cde++;
      this.two = '0' + this.cde;
     }else{
      this.cde++;
      this.two = this.cde;
     }
    }
   }else{
    if(this.abc+1 <= 9){
     this.abc++;
     this.three = '0' + this.abc;
    }else{
     this.abc++;
     this.three=this.abc;
    }
   }
   
  },100)
 },
 // 暂停计时
 endHandler(){
  this.flag = clearInterval(this.flag)
 }
  }
}
</script>

效果如下:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
vue.js实现简单计时器功能发布时间:2022-02-05
下一篇:
Vue中侦听器的基本用法示例发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap