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

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

青灯夜游
青灯夜游 forward
2018-11-13 15:40:46 4468browse

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:

    
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; }
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. 

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!

Statement:
This article is reproduced at:cnblogs.com. If there is any infringement, please contact admin@php.cn delete