微信小程序倒计时功能

wxnl代码

<view class='fr {{huise}}' bindtap="code">{{obtainCode}}</view>

wxss代码

.fr{
  width:100%;
  height:50rpx;
  line-height: 50rpx;
  border-bottom:2rpx solid black;
  color:green;
  font-size:26rpx;
  text-align:center;
}
.huise{
  color:#ccc
}

js代码

Page({
  data: {
    obtainCode:'获取验证码',
    s:120,
    huise:false
  },

    /*
        * 点击倒计时事件
    */
  code: function(){
    var _t = this;
    _t.interval()
  },
    /*
        * 倒计时方法
    */
  interval:function(){
    var t=this;
    t.setData({
      huise:'huise'
    })
    var interval=setInterval(function(){
      var s=t.data.s;
      s--;
      t.setData({
        s:s,
        obtainCode:'重新发送('+s+')'
      });
      if(s<=0){
        clearInterval(interval)
        t.setData({
          s:120,
          huise:false,
          obtainCode:'获取验证码'
        });
      }
    }.bind(this),1000)
  }
}