如何使用vue實(shí)現(xiàn)計時器功能

小編給大家分享一下如何使用vue實(shí)現(xiàn)計時器功能，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

具體內(nèi)容如下

首先我們要知道setTimeout和setInterval的區(qū)別

setTimeout只在指定時間后執(zhí)行一次，代碼如下：

<script>  
//定時器 異步運(yùn)行  
function hello(){  
alert("hello");  
}  
//使用方法名字執(zhí)行方法  
var t1 = window.setTimeout(hello,1000);  
var t2 = window.setTimeout("hello()",3000);//使用字符串執(zhí)行方法  
window.clearTimeout(t1);//去掉定時器  
</script>

setInterval以指定時間為周期循環(huán)執(zhí)行，代碼如下：

//實(shí)時刷新時間單位為毫秒  
setInterval('refreshQuery()',8000);   
/* 刷新查詢 */  
function refreshQuery(){  
   $("#mainTable").datagrid('reload',null);  
}

一般情況下setTimeout用于延遲執(zhí)行某方法或功能，
setInterval則一般用于刷新表單，對于一些表單的實(shí)時指定時間刷新同步

計時器

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, // 秒的計數(shù)
  cde : 0, // 分的計數(shù)
  efg : 0, // 時的計數(shù)
   }
  },
  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>

效果如下：

看完了這篇文章，相信你對“如何使用vue實(shí)現(xiàn)計時器功能”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！