微信小程序验证码倒计时
小丫么小菜菜 人气:0wxml代码:
<view class='container'> <form bindsubmit='denglu'> <view class='list'> <view class='left'> <label>手机号:</label> <input type='number' name="tel" bindinput='shj' maxlength='11' placeholder='请输入手机号'></input> </view> <view class='right'></view> </view> <view class='list border'> <view class='left'> <label>验证码:</label> <input type='number' name="code" placeholder='请输入验证码'></input> </view> <view class='right'> <button class='send' wx:if="{{isShow}}" catchtap='send'>发送验证码</button> <button class='send' disabled='{{true}}' wx:else>{{countdown}}秒后重新发送</button> </view> </view> <button form-type='submit' class='btn'>登录</button> </form> </view>
js代码:
const app = getApp() Page({ /** * 页面的初始数据 */ data: { countdown: 60, isShow:true }, //倒计时 count:function(that){ var interval = setInterval(function () { var countdown = that.data.countdown; if (countdown == 0) { that.setData({ isShow: true, countdown: 60 }) clearInterval(interval) } else { countdown--; that.setData({ isShow: false, countdown: countdown }) } }, 1000) }, //设置手机号 shj: function (e) { this.setData({ tel: e.detail.value }) }, //获取验证码 send: function () { var that=this; wx.showToast({ title: '验证码发送成功', icon: 'none', duration: 1000, success: function () { that.count(that) } }) }, //登录 denglu:function(e){ console.log(e.detail.value) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, })
wxss代码:
.list{ background-color: white; font-size: 32rpx; padding: 20rpx 30rpx; display: flex; justify-content: space-between; align-content: center; align-items: center } .border{ border-top: 1rpx solid #f4f4f4 } .left{ display: flex; align-content: center; align-items: center } .left>label{ width: 140rpx } .left>input{ font-size: 30rpx } .right{ width:240rpx; text-align: right; color: #ff9900; font-size: 30rpx } .send{ background-color: #3296fa; color: white; line-height: 60rpx; font-size: 30rpx; border-radius: 0; padding-left: 0; padding-right: 0 } .btn{ background-color: #3296fa; color: white; line-height: 90rpx; font-size: 32rpx; border-radius: 0; margin-top: 100rpx; }
加载全部内容