詳解微信小程序用定時(shí)器實(shí)現(xiàn)倒計(jì)時(shí)效果
平常在微信小程序開發(fā)的時(shí)候,因項(xiàng)目的需求,倒計(jì)時(shí)必不可少,下面主要講解定時(shí)器在微信小程序中的使用。
這里要先聲明一點(diǎn)的就是,該篇主要實(shí)現(xiàn)倒計(jì)時(shí)功能,而且實(shí)現(xiàn)是時(shí)長(zhǎng)較短的倒計(jì)時(shí),其他的優(yōu)化什么的不作主要考慮。
如果實(shí)現(xiàn)簡(jiǎn)單的60s倒計(jì)時(shí)效果,我們可直接使用setInterval即可,但是在微信小程序中,我們需要用微信小程序的語(yǔ)法,這時(shí)就會(huì)遇到一個(gè)難題,那就是怎么關(guān)閉定時(shí)器的問題,下面給出實(shí)例。
WXML代碼
<view class='countDown'>倒計(jì)時(shí):<text style='color:red'>{{countDownNum}}</text>s</view>
JS代碼:
Page({ /** * 頁(yè)面的初始數(shù)據(jù) */ data: { timer: '',//定時(shí)器名字 countDownNum: '60'//倒計(jì)時(shí)初始值 }, onShow: function(){ //什么時(shí)候觸發(fā)倒計(jì)時(shí),就在什么地方調(diào)用這個(gè)函數(shù) this.countDown(); }, countDown: function () { let that = this; let countDownNum = that.data.countDownNum;//獲取倒計(jì)時(shí)初始值 //如果將定時(shí)器設(shè)置在外面,那么用戶就看不到countDownNum的數(shù)值動(dòng)態(tài)變化,所以要把定時(shí)器存進(jìn)data里面 that.setData({ timer: setInterval(function () {//這里把setInterval賦值給變量名為timer的變量 //每隔一秒countDownNum就減一,實(shí)現(xiàn)同步 countDownNum--; //然后把countDownNum存進(jìn)data,好讓用戶知道時(shí)間在倒計(jì)著 that.setData({ countDownNum: countDownNum }) //在倒計(jì)時(shí)還未到0時(shí),這中間可以做其他的事情,按項(xiàng)目需求來(lái) if (countDownNum == 0) { //這里特別要注意,計(jì)時(shí)器是始終一直在走的,如果你的時(shí)間為0,那么就要關(guān)掉定時(shí)器!不然相當(dāng)耗性能 //因?yàn)閠imer是存在data里面的,所以在關(guān)掉時(shí),也要在data里取出后再關(guān)閉 clearInterval(that.data.timer); //關(guān)閉定時(shí)器之后,可作其他處理codes go here } }, 1000) }) } })
好了,這就是簡(jiǎn)單的倒計(jì)時(shí)實(shí)現(xiàn)過(guò)程,大家可復(fù)制代碼到微信開發(fā)者工具去驗(yàn)證效果。
以上所述是小編給大家介紹的微信小程序用定時(shí)器實(shí)現(xiàn)倒計(jì)時(shí)效果詳解整合,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- 微信小程序 倒計(jì)時(shí)組件實(shí)現(xiàn)代碼
- 微信小程序動(dòng)態(tài)顯示項(xiàng)目倒計(jì)時(shí)效果
- 微信小程序倒計(jì)時(shí)功能實(shí)例代碼
- 微信小程序?qū)崿F(xiàn)團(tuán)購(gòu)或秒殺批量倒計(jì)時(shí)
- 微信小程序顯示倒計(jì)時(shí)功能示例【測(cè)試可用】
- 微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)60s獲取驗(yàn)證碼
- 微信小程序倒計(jì)時(shí)功能實(shí)現(xiàn)代碼
- 微信小程序中顯示倒計(jì)時(shí)代碼實(shí)例
- 微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)功能
- 微信小程序?qū)崿F(xiàn)答題倒計(jì)時(shí)
相關(guān)文章
JavaScript開發(fā)的七個(gè)實(shí)用小技巧(很有用)
日常開發(fā)中,我們經(jīng)常需要編寫大量的js代碼,下面這篇文章主要給大家介紹了關(guān)于JavaScript開發(fā)的七個(gè)實(shí)用小技巧,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04淺談js的html元素的父節(jié)點(diǎn),子節(jié)點(diǎn)
下面小編就為大家?guī)?lái)一篇淺談js的html元素的父節(jié)點(diǎn),子節(jié)點(diǎn)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08js省市區(qū)級(jí)聯(lián)查詢(插件版&無(wú)插件版)
這篇文章主要為大家詳細(xì)介紹了js省市區(qū)級(jí)聯(lián)查詢,包括插件版和無(wú)插件版,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03JS對(duì)象序列化成json數(shù)據(jù)和json數(shù)據(jù)轉(zhuǎn)化為JS對(duì)象的代碼
這篇文章主要介紹了JS對(duì)象序列化成json數(shù)據(jù)和json數(shù)據(jù)轉(zhuǎn)化為JS對(duì)象的代碼,需要的朋友可以參考下2017-08-08dateformat.js超輕量級(jí)的JS日期處理庫(kù)的使用
dateformat.js 是一個(gè)非常簡(jiǎn)潔、輕量級(jí)、不到 5kb 的很簡(jiǎn)潔的 Javascript 庫(kù),本文主要介紹了dateformat.js超輕量級(jí)的JS日期處理庫(kù)的使用,感興趣的可以了解一下2023-12-123種js實(shí)現(xiàn)string的substring方法
這篇文章主要介紹了3種javascript實(shí)現(xiàn)string的substring方法,需要的朋友可以參考下2015-11-11