微信小程序实现随机验证码功能
2018-12-24 00:03
501 查看
本文实例为大家分享了微信小程序实现随机验证码的具体代码,供大家参考,具体内容如下
效果图:
小程序上经常会有一些注册 申请页面需要用到随机验证码。具体实现方法不多说 直接上代码
<view class='yanzhengma'> <text class='left'>{[code]}</text> <text class='right' bindtap='huanyizhang'>换一张</text> </view>
CSS:
.yanzhengma { height: 100rpx; display: flex; align-items: center; justify-content: center; } .yanzhengma .left { font-family: Arial; font-style: italic; font-weight: bold; border: 0; letter-spacing: 3px; font-size: 18px; background-color: #ccc; padding: 10rpx; margin-right: 20rpx; color: blue; }
js:
Page({ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { //刚进入页面随机先获取一个 this.createCode() }, huanyizhang(){ this.createCode() }, createCode() { var code; //首先默认code为空字符串 code = ''; //设置长度,这里看需求,我这里设置了4 var codeLength = 4; //设置随机字符 var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //循环codeLength 我设置的4就是循环4次 for (var i = 0; i < codeLength; i++) { //设置随机数范围,这设置为0 ~ 36 var index = Math.floor(Math.random() * 36); //字符串拼接 将每次随机的字符 进行拼接 code += random[index]; } //将拼接好的字符串赋值给展示的code this.setData({ code: code }) }, })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 使用Java程序实现随机验证码功能的实例
- 使用Java程序实现随机验证码功能的实例
- 微信小程序6位或多位验证码密码输入框功能的实现代码
- 使用Java程序实现随机验证码功能的实例
- Java实现随机验证码功能
- JS 实现随机验证码功能
- 微信小程序实现保存图片到相册功能
- 使用DeviceOne实现微信小程序功能
- 微信小程序实现聊天对话(文本、图片)功能
- 微信小程序实现即时通信聊天功能的实例代码
- 微信小程序实现皮肤功能(夜间模式)
- 关于微信小程序体验版手机只有打开调试才能预览小程序或者或者实现功能(比如唤起支付)
- 微信小程序canvas画图功能实现
- 微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
- 微信小程序 纯代码实现 单图片上传栏(含 上传功能和编辑功能)部分代码
- 微信小程序实现简单定位功能
- 使用技巧:Java实现随机验证码功能实例
- 微信小程序实现根据字母选择城市功能
- 微信小程序实现按所选条件进行筛选功能
- 微信小程序开发之radio实现显示和隐藏功能