微信小程序?qū)崿F(xiàn)計時器開始和結(jié)束功能

更新時間：2022年07月07日 12:31:23 作者：asteriaV

這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)計時器開始和結(jié)束功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序?qū)崿F(xiàn)計時器開始和結(jié)束的具體代碼，供大家參考，具體內(nèi)容如下

1、微信小程序計時功能，點擊開始計時

2、wxml

<view class='tip'>計時器{{h}}:{{m}}:{{s}}</view>
?
<button class='but bg-blue on' ? bindtap="taskStart">任務開始</button>
<button class='but bg-blue on' bindtap="taskEnd">任務結(jié)束</button>

js

data:{
? ? ?h:'00',
? ? ?m:'00',
? ? ?s:'00',
? //存儲計時器
? ?setInter:'',
? ?num:1,
}, ??
?
/**
? ? * 生命周期函數(shù)--監(jiān)聽頁面加載
? ? */
? ?onLoad: function (options) {
??
? ?// this.queryTime()
? ? ?
?
? ?},
// 計時器
queryTime(){
? const that=this;
? var hou=that.data.h
? var min=that.data.m
? var sec=that.data.s
?
? that.data.setInter ?= setInterval(function(){
? ? ? sec++
? ? ? if(sec>=60){
? ? ? ?sec=0
? ? ? ?min++
? ? ? ?if(min>=60){
? ? ? ? ?min=0
? ? ? ? ?hou++
? ? ? ? ?that.setData({
? ? ? ? ? ?h:(hou<10?'0'+min:min)
? ? ? ? ?})
? ? ? ?}else{
? ? ? ? ?that.setData({
? ? ? ? ? ?m:(min<10?'0'+min:min)
? ? ? ? ?})
? ? ? ?}
? ? ? }else{
? ? ? ? that.setData({
? ? ? ? ? s:(sec<10?'0'+sec:sec)
? ? ? ? })
? ? ? }
? ??
? ? ? ? var numVal = that.data.num + 1;
? ? ? ? that.setData({ num: numVal });
? ? ? ? console.log('setInterval==' + that.data.num);
??
? ? },1000)
},
?
? taskStart(){
?
? ? this.queryTime()
? },
? taskEnd(){
?
?
? ? //清除計時器 ?即清除setInter
? ? clearInterval(that.data.setInter)
? ?
? },
? onUnload: function () {
? ? var that =this;
? ? //清除計時器 ?即清除setInter
? ? clearInterval(that.data.setInter)
?
},

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: