小程序实践（八）：验证码倒计时功能

2018-07-19 06:14:14来源：博客园阅读 ()

效果如下：点击发送验证码按钮，按钮背景变色，不可点击，显示倒计时文字

　　首先js文件的data里面声明一个变量用于表示当前是否可以点击，codeIsCanClick = true, 默认是可以点击的

　　写下界面代码：

　　wxml文件中

<view class='centerRow'>
  <view class='inputLabel'>动态码:</view>
  <input class='inputStyle' style="flex:1 " bindinput="bindKeyInput" placeholder="短信动态码" adjust-position='false'       confirm-type='search'></input>
  <button class="emailCode" hidden='{{!codeIsCanClick}}' size="mini" bindtap='clickCode'>获取动态码</button>
  <button class="emailCodeSend" hidden='{{codeIsCanClick}}' size="mini">{{last_time}}秒后重新发送</button>
</view>

　　对应样式 wxss文件：

.centerRow{
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 44px;
  padding-left: 16px;
  padding-right: 16px;
  border-bottom: 1rpx solid #D9D9D9;
  border-top: 1rpx solid #D9D9D9;
}

.inputStyle{
  border-radius:4px;
  color:#D9D9D9;
  outline:0;
  padding-left: 4px;
  margin-left: 4px;
  margin-right: 20rpx;
  font-size: 14px;
}

.inputLabel{
  font-size: 16px;
  color: #33496D;
  width: 90px;
}

.emailCode{
  width: 118px;
  height: 28px;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: row;
  color:white;
  font-size: 14px;
  background-color: #50A2EC;
  border-radius: 14px;
}

.emailCodeSend{
  width: 118px;
  height: 28px;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: row;
  color:white;
  font-size: 14px;
  background-color: #B9DAF7;
  border-radius: 14px;
}

　　以上构成页面静态效果。

　　注意button有两个，分别对应的未点击和点击下的按钮样子，用js中的CodeIsCanClick控制显示隐藏

　　然后在js中写逻辑代码：

// 倒计时事件 单位s
var countdown = 10;
var settime = function (that) {
  if (countdown == 0) {
    that.setData({
      codeIsCanClick: true
    })
    countdown = 10;
    return;
  } else {
    that.setData({
      codeIsCanClick: false,
      last_time: countdown
    })
    countdown--;
  }
  
  setTimeout(function () {
    settime(that)
  }, 1000
  )
}

Page({

  /**
   * 页面的初始数据
   */
  data: {
    codeIsCanClick: true
  },

  /**
   * 点击验证码按钮
   */
  clickCode: function () {
    var that = this;
    
    settime(that)
  },