亲宝软件园·资讯

展开

微信小程序计时器开始和结束

asteriaV 人气:0

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

加载全部内容

相关教程
猜你喜欢
用户评论