1. 本际云推荐 - 专业推荐VPS、服务器，IDC点评首页
  2. 云主机运维
  3. VPS运维

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

小编小本本 • • VPS运维

您好，我是本际云服务器推荐网的小编小本本，今天给大家介绍微信小程序实现计时器开始和结束的演示代码过程。

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

一、微信小程序计时功能

点击开始计时，调用JavaScript代码实现计时器功能。以下是相关的WXML和JS代码：

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)
},

二、结束计时

点击任务结束按钮，即可调用清除计时器函数，结束计时。以下是相关的JavaScript代码：

taskEnd(){
  //清除计时器，即清除setInter
  clearInterval(that.data.setInter)
},
onUnload:function(){
  var that=this;
  //清除计时器，即清除setInter
  clearInterval(that.data.setInter)
},

至此，微信小程序实现计时器开始和结束的全部演示代码已经完成。感谢您的关注，欢迎继续关注本站。

原创文章，作者：小编小本本，如若转载，请注明出处：https://www.benjiyun.com/yunzhujiyunwei/vps-yunwei/7157.html

赞 (0)
小编小本本小编小本本
« 上一篇 2023年4月15日 am10:22
下一篇 » 2023年4月15日 am10:22

相关推荐