微信小程序如何实现获取验证码后倒计时效果？（代码示例）（微信小程序自动获取验证码）

微信小程序如何实现获取验证码后倒计时效果？（代码示例）（微信小程序自动获取验证码）

本篇文章给大家带来的内容是介绍微信小程序如何实现获取验证码后倒计时效果？（代码示例）。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

首先我们来看看效果图：

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

wxml代码：

{{time}}确认修改-

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.jsvar 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 <= 0) { clearInterval(interval) that.setData({ time: '重新发送', currentTime:60, disabled: false }) } }, 1000) }, getVerificationCode(){ this.getCode(); var that = this that.setData({ disabled:true }) },})-

总结：以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。