微信小程序 倒计时功能

<view class="mygroupForm-yzm {{isClicked?'mygroupForm-active':''}}" bindtap="{{isClicked?'':'timeClcik'}}">{{ytext}}</view>

const util = require('../../utils/util.js')

timeClcik(){

    let _this=this

    if (!_this.data.isClicked) {

      wx.showToast({

      title: '验证码已发送',

      })

      //开始倒计时60秒

      setTimeout(()=>{

        _this.setData({

          isClicked:true

        })

        util.settime(_this,60)

      },1500)

     }

  },

function settime(_this,count){

  if (count == 0) {

    _this.setData({

      ytext: '获取验证码',

      isClicked:false

    })

    return

  }

  _this.setData({

    isClicked:true,

    ytext: count + '秒后重发',

  })

  setTimeout(function(){

    count--

    settime(_this, count)

  }, 1000)

}

module.exports = {

  settime: settime

}

1、首先第一步要直接使用setInterval即可，但是在微信小程序中，我们需要用微信小程序的语法，这时就会遇到一个难题，那就是怎么关闭定时器的问题，下面给出实例。WXML代码。

2、接着就是下面是js实现代码// indes.js需要一个目标日期，初始化时，然后就是先得出到当前时间还有剩余多少秒将秒数换成格式化输出为XX天XX小时XX分钟XX秒 XX提供一个时钟，这时候每10ms运行一次，渲染时钟，再总ms数自减10剩余的秒次为零时，return。

3、每10ms都会调用一次function dateformat(micro_second) {// 总秒 var second = Math.floor(micro_second / 1000)//var day = Math.floor(second / 3600/24)。

4、最后就用毫秒的步长受限于系统的时间频率，于是我们精确到0.01s即10ms}// 时间格式化输出，如1天天23时时12分分12秒秒12 ，微信图文中做倒计时就成功了。

---