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

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

应用场景

计时器在我们日常生活活跃跑步、健身、制作食品等方面有着广泛的应用场景，在小程序中实现计时功能可以提升小程序的用户体验度。

实现思路

微信小程序提供了定时器API能力，我们只需要定义计时器的开始时间和结束时间，在每次执行时取当前时间和结束时间的差值，从而得到当前的计时器时间。我们可以通过wx.showModal和wx.showToast等API或者自定义组件的形式将计时器时间进行展示。

以下是其中一个实现计时器开始和结束功能的示例:

示例1.利用原生定时器API

1. 在wxml文件中定义页面展示相关的dom元素:

<view>
  <text>当前计时器时间为{{timeStr}}</text>
  <button bindtap="startTimer">开始计时</button>
  <button bindtap="stopTimer">停止计时</button>
  <button bindtap="resetTimer">重置计时</button>
</view>

1. 在js文件中定义页面相关的数据

Page({
  data: {
    timeStr: '00:00:00',//定义初始值为00:00:00的计时器时间
    timerId: 0,//定义初始值为0的计时器id
    startTime: 0 //定义初始值为0的开始时间
  },
  //计时器开始方法
  startTimer: function () {
    let that = this
    this.setData({ startTime: new Date().getTime() })//设置计时器开始时间
    let timerId = setInterval(function () {//定义计时器
      let time = (new Date().getTime() - that.data.startTime) / 1000//获取当前时间和开始时间的差值
      let h = parseInt(time / 3600)
      let m = parseInt(time % 3600 / 60)
      let s = parseInt(time % 60)
      that.setData({
        timeStr: (h < 10 ? ('0' + h) : h) + ':' + (m < 10 ? ('0' + m) : m) + ':' + (s < 10 ? ('0' + s) : s)//将时间戳格式化为时分秒
      })
    }, 1000)
    this.setData({ timerId: timerId })
  },
  //计时器停止方法
  stopTimer: function () {
    clearInterval(this.data.timerId)//清除计时器
  },
  //计时器重置方法
  resetTimer: function () {
    this.setData({
      timeStr: '00:00:00',
      startTime: 0
    })
    this.stopTimer()
  }
})

示例2.利用第三方weui miniprogram组件库中的计时器组件

1. 在wxml文件中引入weui miniprogram组件

<weui-countdown id="countdown" time="{{time}}" bindfinish="finish"></weui-countdown>
<button bindtap="startTimer">开始计时</button>
<button bindtap="pauseTimer">暂停计时</button>
<button bindtap="continueTimer">继续计时</button>
<button bindtap="resetTimer">重置计时</button>

1. 在js文件中定义计时器事件等相关方法

Page({
  data: {
    time: 0,
    timerStatus: 'pause'
  },
  startTimer: function () {
    if (this.data.time == 0 || this.data.timerStatus == 'finish') {
      this.setData({ time: 3600 })//定义计时器时间为3600秒
    }
    this.selectComponent('#countdown').start()
    this.setData({ timerStatus: 'start' })
  },
  pauseTimer: function () {
    this.selectComponent('#countdown').pause()
    this.setData({ timerStatus: 'pause' })
  },
  continueTimer: function () {
    this.selectComponent('#countdown').continue()
    this.setData({ timerStatus: 'start' })
  },
  resetTimer: function () {
    this.selectComponent('#countdown').reset()
    this.setData({ timerStatus: 'pause' })
  },
  finish: function () {
    wx.showToast({
      title: '计时结束',
    })
    this.setData({ timerStatus: 'finish' })
  }
})

以上是微信小程序实现计时器开始和结束功能的攻略说明，通过简单实现，可以提供小程序用户更好的使用体验。