首先我們來看看效果圖：

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'>確認修改</butt沈陽軟件設計
on>

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.jsvar 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    })  },})

總結：以上就是本篇文章的全部內容，希望能對大家的學習有所幫助。

以上就是微信小程序如何實現獲取驗證碼后倒計時效果？（代碼示例）的詳細內容，更多請關注沈陽網站建設其它相關文章！