本篇文章給大家?guī)淼膬?nèi)容是介紹微信小程序如何實(shí)現(xiàn)獲取驗(yàn)證碼后倒計(jì)時(shí)效果？（代碼示例）。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你們有所幫助。

首先我們來看看效果圖：

wxml代碼：

<input class='input-pwd' placeholder="新密碼" placeholder-style='color: #000' password focus bindconfirm='getPwd'/><input class='input-tel' type='number' placeholder="手機(jī)號(hào)" placeholder-style='color: #000' maxlength='11 confirm-type='done' /><input class='input-verify' type='number' placeholder-style='color: #000' placeholder='手機(jī)驗(yàn)證碼'></input><button class='verify-btn' disabled='{{disabled}}' bindtap="getVerificationCode">{{time}}</button><button class='confirm-btn' bindtap='confirm_btn'>確認(rèn)修改</butt沈陽軟件設(shè)計(jì)
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 //倒計(jì)時(shí)函數(shù)Page({  /**   * 頁面的初始數(shù)據(jù)   */  data: {    time: '獲取驗(yàn)證碼', //倒計(jì)時(shí)     currentTime: 60  },  /**   * 生命周期函數(shù)--監(jiān)聽頁面加載   */  onLoad: function (options) {  },  getPwd:function(e){    console.log(e.detail.value)  },  /**   * 確認(rèn)修改   */  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: '重新發(fā)送',          currentTime:60,          disabled: false           })      }    }, 1000)    },  getVerificationCode(){    this.getCode();    var that = this    that.setData({      disabled:true    })  },})

總結(jié)：以上就是本篇文章的全部內(nèi)容，希望能對(duì)大家的學(xué)習(xí)有所幫助。

以上就是微信小程序如何實(shí)現(xiàn)獲取驗(yàn)證碼后倒計(jì)時(shí)效果？（代碼示例）的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注沈陽網(wǎng)站建設(shè)其它相關(guān)文章！