这篇文章主要介绍微信小程序如何实现发送短信验证码倒计时,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
效果图
WXML文件
<view class="container"> <view class="userinfo"> <image class="userinfo-avatar" src="../../images/timg.jpg" mode="cover"></image> <text class="userinfo-nickname">什么</text> </view> <view class="wrap"> <view class="tel"> <input type="number" bindinput="bindTelInput" maxlength="11" placeholder="请输入手机号" placeholder-/> </view> <view class="ver-code"> <view class="code"> <input type="number" bindinput="bindCodeInput" maxlength="6" placeholder="请输入验证码" placeholder-/> </view> <view class="getCode" bindtap="getCode" wx:if="{{countDownNum == 60 || countDownNum == -1}}"> <button type="primary" plain="true">获取验证码</button> </view> <view class="getCode" wx:else> <button type="primary" plain="true">{{countDownNum}}s后重新获取</button> </view> </view> </view> <view class="btn-login" bindtap="login">登录</view> </view>
JS文件
//获取应用实例 const app = getApp() Page({ /** * 页面的初始数据 */ data: { phone: null, // 手机号 code: null, // 手机验证码 countDownNum: 60, // 倒计时初始值 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }, // 输入手机号 bindTelInput: function (e) { this.setData({ phone: e.detail.value }) }, // 输入验证码 bindCodeInput: function (e) { this.setData({ code: e.detail.value }) }, // 发送手机验证码 getCode: function () { if (!!this.data.phone) { if (!!(/^1[34578]\d{9}$/.test(this.data.phone))) { wx.showToast({ title: "发送成功", icon: "none", duration: 1500 }) this.countDown() } else { wx.showToast({ title: "请输入正确的手机号", icon: "none", duration: 1500 }) } } else { wx.showToast({ title: "请输入手机号", icon: "none", duration: 1500 }) } }, /** * 验证码倒计时 */ countDown: function () { var _this = this var countDownNum = _this.data.countDownNum // 获取倒计时初始值 var timer = setInterval(function () { countDownNum -= 1 _this.setData({ countDownNum: countDownNum }) if (countDownNum <= -1) { clearInterval(timer) // 取消置顶的setInterval函数将要执行的代码 _this.setData({ countDownNum: 60 }) } }, 1000) }, // 手机验证码登录 login: function () { if (this.data.phone) { if (!!(/^1[34578]\d{9}$/.test(this.data.phone))) { if (this.data.code) { wx.showToast({ title: "登录成功", icon: "none", duration: 1500 }) } else { wx.showToast({ title: "请输入验证码", icon: "none", duration: 1500 }) } } else { wx.showToast({ title: "请输入正确的手机号", icon: "none", duration: 1500 }) } } else { wx.showToast({ title: "请输入手机号", icon: "none", duration: 1500 }) } } })
WXSS文件
.userinfo { height: 240rpx; margin: 40rpx auto 0; display: flex; flex-direction: column; align-items: center; } .userinfo .userinfo-avatar { width: 140rpx; height: 140rpx; margin: 20rpx; border-radius: 50%; border: 1rpx solid #dad5d5; } .userinfo .userinfo-nickname { color: #aaa; } .wrap { width: 630rpx; font-size: 32rpx; margin: 80rpx auto 120rpx; } .wrap .tel { width: 100%; height: 68rpx; border-bottom: 1rpx solid #DDE3EC; margin-bottom: 60rpx; display: flex; flex-direction: column; justify-content: flex-start; } .wrap .ver-code { width: 100%; height: 68rpx; border-bottom: 1rpx solid #DDE3EC; display: flex; justify-content: space-between; } .wrap .ver-code .code { } .wrap .ver-code .getCode { min-width: 190rpx; height: 40rpx; } .wrap .ver-code .getCode button { width: 100%; height: 100%; font-size: 28rpx; font-weight: normal; line-height: 40rpx; background: #fff; color: #ffaa7f; border: none; padding: 0; margin: 0; } .btn-login { width: 588rpx; height: 88rpx; background: #ffaa7f; border-radius: 10rpx; text-align: center; line-height: 88rpx; font-size: 36rpx; font-weight: 500; color: #fff; margin: 0 auto; } .clickClass { background: #ea986c; }
以上是“微信小程序如何实现发送短信验证码倒计时”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。