我是靠谱客的博主 不安小甜瓜,这篇文章主要介绍微信小程序如何实现获取验证码后倒计时效果?(代码示例),现在分享给大家,希望可以做个参考。

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

首先我们来看看效果图:

1.jpg

wxml代码:

复制代码
1
2
3
4
5
6
<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代码:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/* 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代码:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
// 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 }) }, })
登录后复制

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

以上就是微信小程序如何实现获取验证码后倒计时效果?(代码示例)的详细内容,更多请关注靠谱客其它相关文章!

最后

以上就是不安小甜瓜最近收集整理的关于微信小程序如何实现获取验证码后倒计时效果?(代码示例)的全部内容,更多相关微信小程序如何实现获取验证码后倒计时效果内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(129)

评论列表共有 0 条评论

立即
投稿
返回
顶部