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