微信小程式實作驗證碼取得倒數計時的效果

不言
發布: 2018-06-27 11:08:18
原創
2324 人瀏覽過

這篇文章主要為大家詳細介紹了微信小程式實現驗證碼取得倒數計時效果,具有一定的參考價值,有興趣的小夥伴們可以參考一下

本文實例為大家分享了微信小程式實作取得驗證碼倒數效果的具體程式碼,供大家參考,具體內容如下

#wxml

##

<button disabled=&#39;{{disabled}}&#39; data-id="2" bindtap="getVerificationCode">
{{time}}
</button>
登入後複製

js


var interval = null //倒计时函数
Page({
 data: {
 date:&#39;请选择日期&#39;,
 fun_id:2,
 time: &#39;获取验证码&#39;, //倒计时 
 currentTime:61
 }, 
 getCode: function (options){
 var that = this;
 var currentTime = that.data.currentTime
 interval = setInterval(function () {
  currentTime--;
  that.setData({
  time: currentTime+&#39;秒&#39;
  })
  if (currentTime <= 0) {
  clearInterval(interval)
  that.setData({
   time: &#39;重新发送&#39;,
   currentTime:61,
   disabled: false 
  })
  }
 }, 100) 
 },
 getVerificationCode(){
 this.getCode();
 var that = this
 that.setData({
  disabled:true
 })
 },

})
登入後複製

#以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

相關推薦:

微信小程式實現倒數計時呼叫相機自動拍照功能

關於微信小程式的選擇器(時間,日期,地區)的解析

微信小程式動態顯示專案倒數計時的效果

#################### ##########

以上是微信小程式實作驗證碼取得倒數計時的效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板