1. 程式人生 > >微信小程式實現驗證碼倒計時效果

微信小程式實現驗證碼倒計時效果

效果圖

wxml

<input class='input-pwd' placeholder="新密碼" placeholder-style='color: #000' password focus bindconfirm='getPwd'/>
<input class='input-tel' type='number' placeholder="手機號" placeholder-style='color: #000' maxlength='11 confirm-type='done' />
<input class='input-verify' type='number' 
placeholder-style='color: #000' placeholder='手機驗證碼'></input> <button class='verify-btn' disabled='{{disabled}}' bindtap="getVerificationCode">{{time}}</button> <button class='confirm-btn' bindtap='confirm_btn'>確認修改</button>

wxss

/* pages/forgetpwd/forgetpwd.wxss */
input
{ padding-left: 20rpx; border-bottom: 1rpx solid #ccc; height: 80rpx; line-height: 80rpx; width: 95%; margin: 0 auto; font-size: 28rpx; } .input-verify{ width: 67%; margin-left: 10rpx; float: left; } .verify-btn{ width: 26%; height: 65rpx; float: right; line-height: 65rpx; background
: #fff; color: #5FD79D; margin: 20rpx 10rpx; font-size: 28rpx; } .confirm-btn{ width: 80%; height: 90rpx; margin: 150rpx auto; background: #5FD79D; color: #fff; }

js

// pages/forgetpwd/forgetpwd.js
var interval = null //倒計時函式
Page({

  /**
   * 頁面的初始資料
   */
  data: {
    time: '獲取驗證碼', //倒計時 
    currentTime: 60
  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {

  },

  getPwd:function(e){
    console.log(e.detail.value)
  },

  /**
   * 確認修改
   */
  confirm_btn:function(){
    wx.redirectTo({
      url: '/pages/login/login',
    })
  },
  
  getCode: function (options){
    var that = this;
    var currentTime = that.data.currentTime
    interval = setInterval(function () {
      currentTime--;
      that.setData({
        time: currentTime+'秒'
      })
      if (currentTime <= 0) {
        clearInterval(interval)
        that.setData({
          time: '重新發送',
          currentTime:60,
          disabled: false   
        })
      }
    }, 1000)  
  },
  getVerificationCode(){
    this.getCode();
    var that = this
    that.setData({
      disabled:true
    })
  },
})