本篇文章給大家帶來的內容是介紹微信小程序如何實現獲取驗證碼后倒計時效果？（代碼示例）。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有所幫助。

首先我們來看看效果圖：

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

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

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