How does the WeChat applet implement the countdown effect after obtaining the verification code? (code example)-Mini Program Development-php.cn

How does the WeChat applet implement the countdown effect after obtaining the verification code? (code example)

青灯夜游

Release： 2018-11-13 15:40:46

forward

4487 people have browsed it

The content of this article is to introduce how the WeChat applet can achieve the countdown effect after obtaining the verification code? (code example). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

First let’s take a look at the renderings:

How does the WeChat applet implement the countdown effect after obtaining the verification code? (code example)

##wxml code:

<input>
<input>
<input>
<button>{{time}}</button>

<button>确认修改</button>

Copy after login

wxss code:

/* 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;
}

Copy after login

js Code:

// pages/forgetpwd/forgetpwd.js
var 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  Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study. <p></p>

Copy after login

The above is the detailed content of How does the WeChat applet implement the countdown effect after obtaining the verification code? (code example). For more information, please follow other related articles on the PHP Chinese website!