微信小程序實現驗證碼倒計時

本文實例為大傢分享瞭微信小程序實現驗證碼倒計時的具體代碼,供大傢參考,具體內容如下

wxml代碼:

<view class='container'>
  <form bindsubmit='denglu'>
    <view class='list'>
      <view class='left'>
        <label>手機號:</label>
        <input type='number' name="tel" bindinput='shj' maxlength='11' placeholder='請輸入手機號'></input>
      </view>
      <view class='right'></view>
    </view>
    <view class='list border'>
      <view class='left'>
        <label>驗證碼:</label>
        <input type='number' name="code" placeholder='請輸入驗證碼'></input>
      </view>
      <view class='right'>
        <button class='send' wx:if="{{isShow}}" catchtap='send'>發送驗證碼</button>
        <button class='send' disabled='{{true}}' wx:else>{{countdown}}秒後重新發送</button>
      </view>
    </view>
    <button form-type='submit' class='btn'>登錄</button>
  </form>
</view>

js代碼:

const app = getApp()
Page({
 
  /**
   * 頁面的初始數據
   */
  data: {
    countdown: 60,
    isShow:true
  },
  //倒計時
  count:function(that){
    var interval = setInterval(function () {
      var countdown = that.data.countdown;
      if (countdown == 0) {
        that.setData({
          isShow: true,
          countdown: 60
        })
        clearInterval(interval)
      } else {
        countdown--;
        that.setData({
          isShow: false,
          countdown: countdown
        })
      }
    }, 1000)
  },
  //設置手機號
  shj: function (e) {
    this.setData({
      tel: e.detail.value
    })
  },
  //獲取驗證碼
  send: function () {
    var that=this;
    wx.showToast({
      title: '驗證碼發送成功',
      icon: 'none',
      duration: 1000,
      success: function () {
        that.count(that)
      }
    })
  }, 
  //登錄
  denglu:function(e){
     console.log(e.detail.value)
  },
  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    
  },
 
})

wxss代碼:

.list{
  background-color: white;
  font-size: 32rpx;
  padding: 20rpx 30rpx;
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center
}
.border{
  border-top: 1rpx solid #f4f4f4
}
.left{
  display: flex;
  align-content: center;
  align-items: center
}
.left>label{
  width: 140rpx
}
.left>input{
  font-size: 30rpx
}
.right{
  width:240rpx;
  text-align: right;
  color: #ff9900;
  font-size: 30rpx
}
.send{
  background-color: #3296fa;
  color: white;
  line-height: 60rpx;
  font-size: 30rpx;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0
}
.btn{
  background-color: #3296fa;
  color: white;
  line-height: 90rpx;
  font-size: 32rpx;
  border-radius: 0;
  margin-top: 100rpx;
}

以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。

推薦閱讀: