微信小程式實現驗證碼倒計時效果
阿新 • • 發佈:2018-11-10
效果圖
wxml
<input class='input-pwd' placeholder="新密碼" placeholder-style='color: #000' password focus bindconfirm='getPwd'/> <input class='input-tel' type='number' placeholder="手機號" placeholder-style='color: #000' maxlength='11 confirm-type='done' /> <input class='input-verify' type='number'placeholder-style='color: #000' placeholder='手機驗證碼'></input> <button class='verify-btn' disabled='{{disabled}}' bindtap="getVerificationCode">{{time}}</button> <button class='confirm-btn' bindtap='confirm_btn'>確認修改</button>
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.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 <= 0) { clearInterval(interval) that.setData({ time: '重新發送', currentTime:60, disabled: false }) } }, 1000) }, getVerificationCode(){ this.getCode(); var that = this that.setData({ disabled:true }) }, })