微信小程序实现发送短信验证码倒计时
更新时间:2021年8月14日 00:01 点击:2248
本文实例为大家分享了微信小程序发送短信验证码倒计时的具体代码,供大家参考,具体内容如下
效果图
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-style="color:#C3C6C4;"/> </view> <view class="ver-code"> <view class="code"> <input type="number" bindinput="bindCodeInput" maxlength="6" placeholder="请输入验证码" placeholder-style="color:#C3C6C4;"/> </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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
相关文章
- 这篇文章主要介绍了微信小程序 页面传值详解的相关资料,需要的朋友可以参考下...2017-03-13
- 最近想自学PHP ,做了个验证码,但不知道怎么搞的,总出现一个如下图的小红叉,但验证码就是显示不出来,原因如下 未修改之前,出现如下错误; (1)修改步骤如下,原因如下,原因是apache权限没开, (2)点击打开php.int., 搜索extension=ph...2013-10-04
- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06
jQuery Real Person验证码插件防止表单自动提交
本文介绍的jQuery插件有点特殊,防自动提交表单的验证工具,就是我们经常用到的验证码工具,先给大家看看效果。效果图如下: 使用说明 需要使用jQuery库文件和Real Person库文件 同时需要自定义验证码显示的CSS样式 使用实例...2015-11-08- 这篇文章主要介绍了微信小程序 网络请求(GET请求)详解的相关资料,需要的朋友可以参考下...2016-11-22
- 这篇文章主要给大家介绍了关于微信小程序如何获取图片宽度与高度的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-10
- 这篇文章主要介绍了微信小程序 二维码生成工具 weapp-qrcode详解,教大家如何在项目中引入weapp-qrcode.js文件,通过实例代码给大家介绍的非常详细,需要的朋友可以参考下...2021-10-23
- 这篇文章主要为大家详细介绍了微信小程序自定义tabbar组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-03-14
- 通过jquery.cookie.js插件可以快速实现“点击获取验证码后60秒内禁止重新获取(防刷新)”的功能效果图:先到官网(http://plugins.jquery.com/cookie/)下载cookie插件,放到相应文件夹,代码如下:复制代码 代码如下: <!DOCTYPE ht...2015-03-15
- 验证码类文件 CreateImg.class.php <?php class ValidationCode { private $width,$height,$codenum; public $checkcode; //产生的验证码 private $checkimage; //验证码图片 private $disturbColor = ''; /...2015-11-08
- 这篇文章主要介绍了微信小程序手势操作之单触摸点与多触摸点的相关资料,需要的朋友可以参考下...2017-03-13
- 这篇文章主要介绍了微信小程序(应用号)开发新闻客户端实例的相关资料,需要的朋友可以参考下...2016-10-25
- 这篇文章主要为大家详细介绍了微信小程序实现canvas分享朋友圈海报,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-21
- 这篇文章主要介绍了微信小程序 页面跳转传递值几种方法详解的相关资料,需要的朋友可以参考下...2017-01-16
- 这篇文章主要介绍了基于JavaScript实现网页倒计时自动跳转代码 的相关资料,需要的朋友可以参考下...2015-12-29
- 这篇文章主要介绍了基于JavaScript实现验证码功能的相关资料...2017-04-03
- 这篇文章主要为大家详细介绍了微信小程序实现选择地址省市区三级联动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-21
- 这篇文章主要为大家详细介绍了微信小程序实现点击导航条切换页面,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-19
- 这篇文章主要介绍了uniapp,微信小程序中使用 MQTT的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11