achieve effect
In order to see the effect, set it to 10s first, and it is usually 60s
Functional version
- wxml
-
Here I did not use view, text and other tags, but used button. The main reason is that the disabled attribute is used, which is used to invalidate the event after the verification code is sent, and the event continues to take effect after the countdown is over;
Problem encountered: Because the view and text tags were used in the early stage, no attribute of type disabled was found, so after sending the verification code, you can still click, which leads to multiple timers being turned on, the timing speed is accelerated, and the timer is covered.
//点击属性：sendCode 点击状态：smsFlag 字体颜色：sendColor 显示文字：sendTime <button bindtap="sendCode" disabled="{ {smsFlag}}" style='margin-top:50px; margin-right:10rpx;color:{ {sendColor}};font-size:28rpx'>{ {sendTime}}</button> - js
Note: The smsFlag declared in wxml represents the disabled state; disabled: true means not clickable; false means clickable (this is a bit awkward for me--!)
Page({
data: {
//设置初始的状态、包含字体、颜色、还有等待事件 > <
sendTime: '获取验证码',
sendColor: '#363636',
snsMsgWait: 60
},
// 获取验证码
sendCode: function() {
// 60秒后重新获取验证码
var inter = setInterval(function() {
this.setData({
smsFlag: true,
sendColor: '#cccccc',
sendTime: this.data.snsMsgWait + 's后重发',
snsMsgWait: this.data.snsMsgWait - 1
});
if (this.data.snsMsgWait < 0) {
clearInterval(inter)
this.setData({
sendColor: '#363636',
sendTime: '获取验证码',
snsMsgWait: 60,
smsFlag: false
});
}
}.bind(this), 1000);
},
})
Project full version
- forget.js
-
var md5Utils = require('../../utils/utilMd5.js'); var ptserviceUrl = getApp().globalData.ptserviceUrl; Page({ /** * 页面的初始数据 */ data: { tel: "", code: "", newPassword: "", sendTime: '发送验证码', sendColor: '#363636', snsMsgWait: 60 }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { }, inputTel: function(e) { this.setData({ tel: e.detail.value }) }, inputCode: function(e) { this.setData({ code: e.detail.value }) }, inputNewpassword: function(e) { this.setData({ newPassword: e.detail.value }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function() { }, /** * 生命周期函数--监听页面显示 */ onShow: function() { }, // 获取验证码 sendCode: function() { var that = this; if (this.data.tel == "") { this.toast('请输入手机号'); return; } if (!(/^1[3|4|5|8][0-9]\d{8}$/.test(this.data.tel))) { this.toast('手机号输入错误'); return; } // 60秒后重新获取验证码 var inter = setInterval(function() { this.setData({ smsFlag: true, sendColor: '#cccccc', sendTime: this.data.snsMsgWait + 's后重发', snsMsgWait: this.data.snsMsgWait - 1 }); if (this.data.snsMsgWait < 0) { clearInterval(inter) this.setData({ sendColor: '#363636', sendTime: '发送验证码', snsMsgWait: 60, smsFlag: false }); } }.bind(this), 1000); // 写自己的服务器和接口- - wx.request({ url: ptserviceUrl + 'sendCode', data: { mobiles: this.data.tel, }, method: "POST", header: { 'content-type': "application/x-www-form-urlencoded" }, success(res) { console.log(res); if (res.data.success) { that.toast('短信验证码发送成功，请注意查收'); } } }) }, // 提交信息 saveClick: function() { var that = this; if (that.data.tel == "") { that.toast("手机号不可为空"); return; } if (that.data.code == "") { that.toast("验证码不可为空"); return; } if (that.data.newPassword == "") { that.toast("新密码不可为空"); return; } var md5psd = md5Utils.hexMD5(that.data.newPassword); // 写自己的服务器和接口- - wx.request({ url: ptserviceUrl + 'forget', data: { mobile: this.data.tel, phcode: this.data.code, npwd: md5psd, }, method: "POST", header: { 'content-type': "application/x-www-form-urlencoded" }, success(res) { console.log(res); if (res.data.success) { wx.navigateBack({ delta: 1, }) } else { that.toast(res.data.msg); } } }) }, // toast方法抽取 toast: function(msg) { wx.showToast({ title: msg, icon: 'none', duration: 2000, mask: true }) }, /** * 生命周期函数--监听页面隐藏 */ onHide: function() { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function() { }, /** * 用户点击右上角分享 */ onShareAppMessage: function() { } }) - forget.wxml (for the convenience of viewing, the class is not extracted, you can directly copy and use > , <)
-
<view class='container'> <view style='width:100%;height:100%;flex-direction:column'> <view style='margin-left:38rpx;margin-top:15px;margin-right:38rpx'> <view style=';display:flex;align-items:center; justify-content:space-between;'> <input bindinput="inputTel" maxlength="11" name="account" placeholder="请输入手机号" style='margin-top:50px;font-size:34rpx'></input> <button bindtap="sendCode" disabled="{ {smsFlag}}" style='margin-top:50px;margin-right:10rpx;color:{ {sendColor}};font-size:28rpx'>{ {sendTime}}</button> </view> <view style='background-color:#eee;width:100%;height:1px;margin-top:10px'></view> </view> <view style='margin-left:38rpx;margin-top:20px;margin-right:38rpx'> <view style='display:flex;align-items:center; justify-content:space-between;'> <input bindinput="inputCode" name="account" maxlength="8" placeholder="请输入验证码" style='font-size:34rpx'></input> </view> <view style='background-color:#eee;width:100%;height:1px;margin-top:10px'></view> </view> <view style='margin-left:38rpx;margin-top:20px;margin-right:38rpx'> <view style='display:flex;align-items:center; justify-content:space-between;'> <input bindinput="inputNewpassword" name="account" type='password' placeholder="请输入新密码" style='font-size:34rpx'></input> </view> <view style='background-color:#eee;width:100%;height:1px;margin-top:10px'></view> </view> <view style='margin-right:38rpx;margin-left:38rpx;margin-top:30px;background:#fff;display:flex;height:45px;align-items:center;justify-content:center' bindtap='saveClick'> <text style='font-size:15px'>确定</text> </view> </view> </view>