微信小程序?qū)崿F(xiàn)計(jì)時(shí)器開始和結(jié)束功能
更新時(shí)間：2022年07月07日 12:31:23 作者：asteriaV
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)計(jì)時(shí)器開始和結(jié)束功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)計(jì)時(shí)器開始和結(jié)束的具體代碼，供大家參考，具體內(nèi)容如下
1、微信小程序計(jì)時(shí)功能，點(diǎn)擊開始計(jì)時(shí)
2、wxml
<view class='tip'>計(jì)時(shí)器{{h}}:{{m}}:{{s}}</view>
?
<button class='but bg-blue on' ? bindtap="taskStart">任務(wù)開始</button>
<button class='but bg-blue on' bindtap="taskEnd">任務(wù)結(jié)束</button>js
data:{
? ? ?h:'00',
? ? ?m:'00',
? ? ?s:'00',
? //存儲(chǔ)計(jì)時(shí)器
? ?setInter:'',
? ?num:1,
}, ??
?
/**
? ? * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
? ? */
? ?onLoad: function (options) {
??
? ?// this.queryTime()
? ? ?
?
? ?},
// 計(jì)時(shí)器
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(){
?
?
? ? //清除計(jì)時(shí)器 ?即清除setInter
? ? clearInterval(that.data.setInter)
? ?
? },
? onUnload: function () {
? ? var that =this;
? ? //清除計(jì)時(shí)器 ?即清除setInter
? ? clearInterval(that.data.setInter)
?
},以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
使用defer和async實(shí)現(xiàn)高效加載JavaScript
async和defer都是異步加載腳本,但async是加載完腳本后立即執(zhí)行,而defer是在HTML解析完成后再執(zhí)行腳本,本文給大家介紹了如何使用defer和async高效加載JavaScript,文中通過代碼和圖文講解的非常詳細(xì),需要的朋友可以參考下2024-06-06
這篇文章主要介紹了js控制容器隱藏出現(xiàn)防止樣式變化的兩種方法,需要的朋友可以參考下2014-04-04
JS實(shí)現(xiàn)向iframe中表單傳值的方法
這篇文章主要介紹了JS實(shí)現(xiàn)向iframe中表單傳值的方法,涉及js針對(duì)頁(yè)面元素及表單屬性操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-03-03
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)3D輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
js自動(dòng)生成的元素與頁(yè)面原有元素發(fā)生堆疊的解決方法
商品屬性和商品規(guī)格是js動(dòng)態(tài)生成的元素，商品擴(kuò)展信息的兩個(gè)文本框是原有的元素，他們發(fā)生堆疊，下面是一些解決思路2014-09-09
Symbol是一種特殊的、不可變的數(shù)據(jù)類型,可以作為對(duì)象屬性的標(biāo)識(shí)符使用,表示獨(dú)一無二的值,這篇文章主要給大家介紹了關(guān)于JS中Symbol類型的介紹與基本用法的相關(guān)資料,需要的朋友可以參考下2024-04-04
JavaScript中三種觀察者實(shí)現(xiàn)案例分享
前面突然看到 Object.defineProperty,就順道想到 Proxy,然后就想到了觀察者案例,這邊還沒有用 javascript編寫一個(gè)觀察者的案例呢,順道加入了一個(gè) event-bus 監(jiān)聽事件案例,湊一起看一看不同的實(shí)現(xiàn)方式,需要的朋友可以參考下2023-08-08
子父窗口之間的操作...2006-07-07
關(guān)于遞歸運(yùn)算的順序測(cè)試代碼，需要的朋友可以參考下。2011-11-11
這篇文章主要為大家詳細(xì)介紹了基于Cesium繪制拋物弧線，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11