微信小程序计时器的实现

1、index.wxml

<view class="main">
<image class="jishi" src=""></image>
<label>已用时:{{h}}:{{m}}:{{s}}</label>
</view>

2、index.js

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    h:'00',
    m:'00',
    s:'00',
  },
  queryTime:function(){
    const that = this
    var hou = that.data.h
    var min = that.data.m
    var sec = that.data.s
    setInterval(function(){
      sec++
      if (sec>=60){
        sec = 0
        min++
        if(min>=60){
          min = 0
          hou++
          that.setData({
            h:(hou<10?'0'+hou:hou)
          })
        }else{
          that.setData({
            m:(min<10?'0'+min:min)
          })
        }
      }else{
        that.setData({
          s:(sec<10?'0'+sec:sec)
        })
      }
    },1000)
  },
  onLoad:function(options){
    this.queryTime()
  },
})

 

posted @ 2022-05-14 20:33  方寸堂  阅读(298)  评论(0编辑  收藏  举报