How to implement verification code to obtain countdown effect through WeChat applet

This article mainly introduces in detail the countdown effect of WeChat applet to obtain verification code. It has certain reference value. Interested friends can refer to it.

The example in this article is shared with everyone on WeChat. The specific code of the applet to achieve the countdown effect of the verification code is for your reference. The specific content is as follows

wxml

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

js

var interval = null //倒计时函数
Page({
 data: {
 date:'请选择日期',
 fun_id:2,
 time: '获取验证码', //倒计时 
 currentTime:61
 }, 
 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: &#39;重新发送&#39;,
   currentTime:61,
   disabled: false 
  })
  }
 }, 100) 
 },
 getVerificationCode(){
 this.getCode();
 var that = this
 that.setData({
  disabled:true
 })
 },

})

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

New features of webpack 4.0.0-beta.0 version (detailed tutorial)

In vue2.0 component How to implement value passing and communication in vue.js

Implement paging in vue.js and click the page number to change the page content

The above is the detailed content of How to implement verification code to obtain countdown effect through WeChat applet. For more information, please follow other related articles on the PHP Chinese website!