微信小程序?qū)崿F(xiàn)計(jì)時(shí)器開始和結(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)聽頁面加載
? ? */
? ?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)文章
關(guān)于RequireJS的簡(jiǎn)單介紹即使用方法
下面小編就為大家?guī)硪黄P(guān)于RequireJS的簡(jiǎn)單介紹即使用方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
使用微信小程序開發(fā)彈出框應(yīng)用實(shí)例詳解
本文通過實(shí)例代碼給大家介紹了使用微信小程序開發(fā)彈出框功能,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10
對(duì)layui中的onevent 和event的使用詳解
今天小編就為大家分享一篇對(duì)layui中的onevent 和event的使用詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
js獲取兩個(gè)數(shù)組對(duì)象的差集實(shí)現(xiàn)方法
這篇文章主要為大家介紹了js獲取兩個(gè)數(shù)組對(duì)象的差集實(shí)現(xiàn)方法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
JavaScript代碼異常監(jiān)控實(shí)現(xiàn)過程詳解
這篇文章主要介紹了JavaScript代碼異常監(jiān)控實(shí)現(xiàn)過程詳解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
JS簡(jiǎn)單實(shí)現(xiàn)數(shù)組去重的方法分析
這篇文章主要介紹了JS簡(jiǎn)單實(shí)現(xiàn)數(shù)組去重的方法,結(jié)合具體實(shí)例形式分析了javascript數(shù)組遍歷、判斷實(shí)現(xiàn)去重復(fù)的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2017-10-10
一個(gè)用js實(shí)現(xiàn)的頁內(nèi)搜索代碼
一個(gè)用js實(shí)現(xiàn)的頁內(nèi)搜索代碼...2007-05-05
解決使用bootstrap的dropdown部件時(shí)報(bào)錯(cuò):error:Bootstrap dropdown require
這篇文章主要介紹了使用bootstrap的dropdown部件時(shí)報(bào)錯(cuò):error:Bootstrap dropdown require Popper.js ,小編把問題描述和解決方案分享給大家,需要的朋友可以參考下2018-08-08

