微信小程序?qū)崿F(xiàn)簡單倒計時功能
本文實例為大家分享了微信小程序?qū)崿F(xiàn)簡單倒計時的具體代碼,供大家參考,具體內(nèi)容如下
任務(wù)描述:
計時器
任務(wù)要求:
案例描述:設(shè)計一個實現(xiàn)倒計時功能的小程序,小程序運行后,首先顯示空白界面,過2秒后才顯示計時界面,點擊“開始計時”按鈕后開始倒計時,點擊“停止計時”按鈕后停止計時。
實現(xiàn)效果:根據(jù)案例描述做出如下圖效果,初始顯示空白界面,2秒后顯示計時界面(圖1),數(shù)字為60,點擊“開始計時”按鈕后開始倒計時,點擊“停止計時”按鈕后停止計時(圖2)。

index.wxml
<!--index.wxml-->
<view class="container">
? <view wx:if="{{hidden}}">
? ? <view class="title"> 計時器</view>
? ? <view class="play"> {{num}}</view>
? ? <view class="btn">
? ? ? <button bindtap="start"> 開始計時</button>
? ? ? <button bindtap="stop">停止計時</button>
? ? </view>
? </view>
</view>index.js
// index.js
// 獲取應(yīng)用實例
var num = 60;//定義開始秒數(shù)
//定義一個布爾變量,用于停止計時器
var ynStop=false;
Page({
? data: {
? ? //用于顯示計算器
? ? hidden: false,
? ? num: num
? },
? //渲染出計時器
? onLoad() {
? ? //function里直接用this會出錯
? ? var that =this
? ? //延時顯示函數(shù)
? ? setTimeout(function(){
? ? //設(shè)置隱藏屬性為否
? ? that.setData({
? ? ? hidden:true
? ? })
? }
? //設(shè)置延時為2s
? ? , 2000);
? },
?
? start: function () { //開始計時函數(shù)
? ? //設(shè)置顯示器值為當(dāng)前值減一
? ? this.setData({
? ? ? num: num--
? ? })
? ? //調(diào)用timer函數(shù)
? ? this.timer()
? ? //后臺打印num值
? ? console.log(num)
? },
?
? stop: function () { ?//停止函數(shù)
? ? //將是否停止循環(huán)值定義為真
? ? ? ynStop=true;
? ? console.log(ynStop)
? },
? timer: function () { //計時函數(shù)
?
? ? if (num > 0&&ynStop==false) {
? ? ? //隔一秒回調(diào)start函數(shù),注意setTimeout里函數(shù)不要加括號,或者用function(){}
? ? ? setTimeout(this.start, 1000);
? ? } else {
? ? ? this.setData({
? ? ? ? num: 0
? ? ? })
? ? }
? }
})
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript中EventBus實現(xiàn)對象之間通信
這篇文章主要介紹了JavaScript中EventBus實現(xiàn)對象之間通信,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
js數(shù)組的基本用法及數(shù)組根據(jù)下標(biāo)(數(shù)值或字符)移除元素
js數(shù)組的用法包括創(chuàng)建、取值賦值、添加以及根據(jù)下標(biāo)(數(shù)值或字符)移除元素等等,在本文將為大家詳細介紹下,感興趣的朋友可以參考下2013-10-10
JS中如何實現(xiàn)點擊a標(biāo)簽返回頁面頂部的問題
這篇文章主要介紹了JS中實現(xiàn)點擊a標(biāo)簽返回頁面頂部的問題,非常不錯,具有參考借鑒價值,需要的的朋友參考下吧2017-01-01

