小程式實踐（八）：驗證碼倒計時功能

 效果如下：點擊發送驗證碼按鈕，按鈕背景變色，不可點擊，顯示倒計時文字

　　首先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)
  },

--------------------------------------------------------------------------------------

小程式實踐（一）：主頁tab選項實現

小程式實踐（二）：swiper組件實現輪播圖效果

小程式實踐（三）：九宮格實現及item跳轉

小程式實踐（四）：動態控制組件的顯示/隱藏

小程式實踐（五）：for迴圈綁定item的點擊事件

小程式實踐（六）：view內部組件排版

小程式實踐（七）：頁面間傳值

小程式實踐（八）：驗證碼倒計時功能