使用vue實(shí)現(xiàn)計(jì)時(shí)器功能
本文實(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í)間刷新同步
計(jì)時(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í)有所幫助,也希望大家多多支持腳本之家。
- 基于Vue方法實(shí)現(xiàn)簡(jiǎn)單計(jì)時(shí)器
- vue.js實(shí)現(xiàn)簡(jiǎn)單計(jì)時(shí)器功能
- vue實(shí)現(xiàn)簡(jiǎn)易計(jì)時(shí)器組件
- vue計(jì)時(shí)器的實(shí)現(xiàn)方法
- Vue計(jì)時(shí)器的用法詳解
- 解決vue組件銷毀之后計(jì)時(shí)器繼續(xù)執(zhí)行的問(wèn)題
- 在Vue環(huán)境下利用worker運(yùn)行interval計(jì)時(shí)器的步驟
- Vue 使用計(jì)時(shí)器實(shí)現(xiàn)跑馬燈效果的實(shí)例代碼
- vue 計(jì)時(shí)器組件的實(shí)現(xiàn)代碼
- Vue.js實(shí)現(xiàn)簡(jiǎn)單計(jì)時(shí)器應(yīng)用
相關(guān)文章
Vue中消息橫向滾動(dòng)時(shí)setInterval清不掉的問(wèn)題及解決方法
最近在做項(xiàng)目時(shí),需要進(jìn)行兩個(gè)組件聯(lián)動(dòng),一個(gè)輪詢獲取到消息,然后將其傳遞給另外一個(gè)組件進(jìn)行橫向滾動(dòng)展示,結(jié)果滾動(dòng)的速度越來(lái)越快。接下來(lái)通過(guò)本文給大家分享Vue中消息橫向滾動(dòng)時(shí)setInterval清不掉的問(wèn)題及解決方法,感興趣的朋友一起看看吧2019-08-08vue+axios實(shí)現(xiàn)登錄攔截的實(shí)例代碼
本篇文章主要介紹了vue+axios實(shí)現(xiàn)登錄攔截的實(shí)例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05Vue防止白屏添加首屏動(dòng)畫(huà)的實(shí)例
今天小編就為大家分享一篇Vue防止白屏添加首屏動(dòng)畫(huà)的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10Vue3+vantUI3時(shí)間組件封裝過(guò)程支持選擇年以及年月日時(shí)分秒
這篇文章主要介紹了Vue3+vantUI3時(shí)間組件封裝過(guò)程支持選擇年以及年月日時(shí)分秒,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07Ant Design Upload 文件上傳功能的實(shí)現(xiàn)
這篇文章主要介紹了Ant Design Upload 文件上傳功能的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04vue實(shí)現(xiàn)select下拉顯示隱藏功能
這篇文章主要介紹了vue實(shí)現(xiàn)select下拉顯示隱藏功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09解決elementui導(dǎo)航折疊卡頓的問(wèn)題
這篇文章主要介紹了解決elementui導(dǎo)航折疊卡頓的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07