本文實(shí)例為大家分享了vue實(shí)現(xiàn)計(jì)時(shí)器功能的具體代碼，供大家參考，具體內(nèi)容如下

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

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

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

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

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

一般情況下setTimeout用于延遲執(zhí)行某方法或功能，setInterval則一般用于刷新表單，對(duì)于一些表單的實(shí)時(shí)指定時(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'>開(kāi)始</el-button> <el-button type='primary' @click='endHandler'>暫停</el-button></div>

JAVASCRIPT代碼

<script>export default { name: ’HelloWorld’, data(){ return { flag: null, one : ’00’, // 時(shí) two : ’00’, // 分 three : ’00’, // 秒 abc : 0, // 秒的計(jì)數(shù) cde : 0, // 分的計(jì)數(shù) efg : 0, // 時(shí)的計(jì)數(shù) } }, props: { msg: String }, mounted() { }, methods:{ // 開(kāi)始計(jì)時(shí) 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) }, // 暫停計(jì)時(shí) endHandler(){ this.flag = clearInterval(this.flag) } }}</script>

效果如下：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。