微信小程序怎樣實(shí)現(xiàn)獲取驗(yàn)證碼后倒計(jì)時(shí)效果

這篇文章主要介紹微信小程序怎樣實(shí)現(xiàn)獲取驗(yàn)證碼后倒計(jì)時(shí)效果，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

為靖安等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及靖安網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、靖安網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

首先我們來(lái)看看效果圖：

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)修改</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 //倒計(jì)時(shí)函數(shù)
Page({

  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    time: '獲取驗(yàn)證碼', //倒計(jì)時(shí) 
    currentTime: 60
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
   */
  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
    })
  },
})

以上是“微信小程序怎樣實(shí)現(xiàn)獲取驗(yàn)證碼后倒計(jì)時(shí)效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文名稱：微信小程序怎樣實(shí)現(xiàn)獲取驗(yàn)證碼后倒計(jì)時(shí)效果
標(biāo)題網(wǎng)址：http://muchs.cn/article44/ihgdhe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、外貿(mào)建站、建站公司、域名注冊(cè)、面包屑導(dǎo)航、App開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)