微信小程序如何实现计时器开始和结束功能

来源: https://www.ucloud.cn/yun/128399.html 作者: 3403771864 发布日期: 发布于2022-12-04 11:50

本篇文章主要为大家介绍微信小程序实现计时器开始和结束整个演示代码过程：

　　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,
　　},
　　/**
　　* 生命周期函数--监听页面加载
　　*/
　　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)
　　},

　　本篇内容已全部讲述完毕，欢迎大家继续关注。