微信小程序?qū)崿F(xiàn)簡(jiǎn)單倒計(jì)時(shí)功能
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)簡(jiǎn)單倒計(jì)時(shí)的具體代碼,供大家參考,具體內(nèi)容如下
任務(wù)描述:
計(jì)時(shí)器
任務(wù)要求:
案例描述:設(shè)計(jì)一個(gè)實(shí)現(xiàn)倒計(jì)時(shí)功能的小程序,小程序運(yùn)行后,首先顯示空白界面,過2秒后才顯示計(jì)時(shí)界面,點(diǎn)擊“開始計(jì)時(shí)”按鈕后開始倒計(jì)時(shí),點(diǎn)擊“停止計(jì)時(shí)”按鈕后停止計(jì)時(shí)。
實(shí)現(xiàn)效果:根據(jù)案例描述做出如下圖效果,初始顯示空白界面,2秒后顯示計(jì)時(shí)界面(圖1),數(shù)字為60,點(diǎn)擊“開始計(jì)時(shí)”按鈕后開始倒計(jì)時(shí),點(diǎn)擊“停止計(jì)時(shí)”按鈕后停止計(jì)時(shí)(圖2)。
index.wxml
<!--index.wxml--> <view class="container"> ? <view wx:if="{{hidden}}"> ? ? <view class="title"> 計(jì)時(shí)器</view> ? ? <view class="play"> {{num}}</view> ? ? <view class="btn"> ? ? ? <button bindtap="start"> 開始計(jì)時(shí)</button> ? ? ? <button bindtap="stop">停止計(jì)時(shí)</button> ? ? </view> ? </view> </view>
index.js
// index.js // 獲取應(yīng)用實(shí)例 var num = 60;//定義開始秒數(shù) //定義一個(gè)布爾變量,用于停止計(jì)時(shí)器 var ynStop=false; Page({ ? data: { ? ? //用于顯示計(jì)算器 ? ? hidden: false, ? ? num: num ? }, ? //渲染出計(jì)時(shí)器 ? onLoad() { ? ? //function里直接用this會(huì)出錯(cuò) ? ? var that =this ? ? //延時(shí)顯示函數(shù) ? ? setTimeout(function(){ ? ? //設(shè)置隱藏屬性為否 ? ? that.setData({ ? ? ? hidden:true ? ? }) ? } ? //設(shè)置延時(shí)為2s ? ? , 2000); ? }, ? ? start: function () { //開始計(jì)時(shí)函數(shù) ? ? //設(shè)置顯示器值為當(dāng)前值減一 ? ? this.setData({ ? ? ? num: num-- ? ? }) ? ? //調(diào)用timer函數(shù) ? ? this.timer() ? ? //后臺(tái)打印num值 ? ? console.log(num) ? }, ? ? stop: function () { ?//停止函數(shù) ? ? //將是否停止循環(huán)值定義為真 ? ? ? ynStop=true; ? ? console.log(ynStop) ? }, ? timer: function () { //計(jì)時(shí)函數(shù) ? ? ? if (num > 0&&ynStop==false) { ? ? ? //隔一秒回調(diào)start函數(shù),注意setTimeout里函數(shù)不要加括號(hào),或者用function(){} ? ? ? setTimeout(this.start, 1000); ? ? } else { ? ? ? this.setData({ ? ? ? ? num: 0 ? ? ? }) ? ? } ? } })
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序 倒計(jì)時(shí)組件實(shí)現(xiàn)代碼
- 微信小程序動(dòng)態(tài)顯示項(xiàng)目倒計(jì)時(shí)效果
- 微信小程序?qū)崿F(xiàn)訂單倒計(jì)時(shí)
- 微信小程序倒計(jì)時(shí)功能實(shí)例代碼
- 微信小程序之發(fā)送短信倒計(jì)時(shí)功能
- 微信小程序?qū)崿F(xiàn)日期格式化和倒計(jì)時(shí)
- 微信小程序?qū)崿F(xiàn)團(tuán)購或秒殺批量倒計(jì)時(shí)
- 微信小程序顯示倒計(jì)時(shí)功能示例【測(cè)試可用】
- 微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)60s獲取驗(yàn)證碼
- 微信小程序注冊(cè)60s倒計(jì)時(shí)功能 使用JS實(shí)現(xiàn)注冊(cè)60s倒計(jì)時(shí)功能
相關(guān)文章
uni-app低成本封裝一個(gè)取色器組件的簡(jiǎn)單方法
最近想實(shí)現(xiàn)一個(gè)uniapp取色器組件,實(shí)現(xiàn)后發(fā)現(xiàn)效果還不錯(cuò),下面這篇文章主要給大家介紹了關(guān)于uni-app低成本封裝一個(gè)取色器組件的相關(guān)資料,文中通過圖文介紹的介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02JavaScript實(shí)現(xiàn)簡(jiǎn)單圖片翻轉(zhuǎn)的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單圖片翻轉(zhuǎn)的方法,涉及javascript操作圖片與數(shù)組的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04uploadify在Firefox下丟失session問題的解決方法
在用uploadify上傳插件時(shí)遇到了一個(gè)問題,在讀session時(shí)認(rèn)為沒有權(quán)限而被攔截了,后來在后臺(tái)打印登錄時(shí)產(chǎn)生session的id和上傳時(shí)讀取session的id,解決方法如下,感興趣的朋友可以了解下2013-08-08js獲取TreeView控件選中節(jié)點(diǎn)的Text和Value值的方法
在實(shí)際項(xiàng)目中,遇到一個(gè)問題,首先彈出一個(gè)新窗口,新窗口中放了一個(gè)TreeView控件,現(xiàn)在要解決的是,如何單擊TreeView中一個(gè)節(jié)點(diǎn),返回Text和Value到父頁面并關(guān)閉該新窗口,本文將詳細(xì)介紹此方法的實(shí)現(xiàn)2012-11-11javascript 獲取函數(shù)形參個(gè)數(shù)
本節(jié)主要介紹了javascript獲取函數(shù)形參個(gè)數(shù)的具體實(shí)現(xiàn),需要的朋友可以參考下2014-07-07