微信小程序实现点击生成随机验证码


Posted in Javascript onSeptember 09, 2020

本文实例为大家分享了微信小程序实现点击生成随机验证码的具体代码,供大家参考,具体内容如下

效果图

微信小程序实现点击生成随机验证码

wxml

<view bindtap="getCode">{{ code }}</view>

js

Page({
data: {
 code: ''
},
onLoad() {
 //进入页面就调用方法 创建一个随机验证码
 this.createCode()
},

getCode() {
 //点击调用创建验证码方法
 this.createCode()
},

//创建随机验证码方法
createCode() {
 let code = ''; //初始化验证码
 let codeLength = 6; //设置验证码长度
 //设置随机字符
 let txt = 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');
 //循环
 for(let i = 0; i < codeLength; i++) {
 //设置随机数范围
 let index = Math.floor(Math.random() * 36);
 code += txt[index];
 }
 //动态设置数据
 this.setDate({
 code
 }) 
}
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 面向对象编程基础:继承
Aug 21 Javascript
jQuery+CSS实现简单切换菜单示例
Jul 27 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
Nov 16 Javascript
Bootstrap和Java分页实例第二篇
Dec 23 Javascript
js实现文字选中分享功能
Jan 25 Javascript
让你彻底掌握es6 Promise的八段代码
Jul 26 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
Aug 14 Javascript
vue.js todolist实现代码
Oct 29 Javascript
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
深入理解node.js http模块
Jan 24 Javascript
微信小程序中weui用法解析
Oct 21 Javascript
JS实现页面鼠标点击出现图片特效
Aug 19 Javascript
vue 获取元素额外生成的data-v-xxx操作
Sep 09 #Javascript
vue移动端写的拖拽功能示例代码
Sep 09 #Javascript
vue路由的配置和页面切换详解
Sep 09 #Javascript
JavaScript 实现下雪特效的示例代码
Sep 09 #Javascript
在Vue中获取自定义属性方法:data-id的实例
Sep 09 #Javascript
vue+高德地图实现地图搜索及点击定位操作
Sep 09 #Javascript
vue实现几秒后跳转新页面代码
Sep 09 #Javascript
You might like
PHP配置文件中最常用四个ini函数
2007/03/19 PHP
php 远程关机操作的代码
2008/12/05 PHP
Yii rules常用规则示例
2016/03/15 PHP
解决laravel 5.1报错:No supported encrypter found的办法
2017/06/07 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
javascript 有趣而诡异的数组
2009/04/06 Javascript
前台js改变Session的值(用ajax实现)
2012/12/28 Javascript
jQuery对象的length属性用法实例
2014/12/27 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
2016/05/21 Javascript
jQuery简单设置文本框回车事件的方法
2016/08/01 Javascript
详解vue 中使用 AJAX获取数据的方法
2017/01/18 Javascript
解决JQuery全选/反选第二次失效的问题
2017/10/11 jQuery
vue实现商城上货组件简易版
2017/11/27 Javascript
原生JavaScript实现todolist功能
2018/03/02 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
详解JavaScript中的函数、对象
2019/04/01 Javascript
详解JQuery基础动画操作
2019/04/12 jQuery
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
react组件基本用法示例小结
2020/04/27 Javascript
详解datagrid使用方法(重要)
2020/11/06 Javascript
详解React路由传参方法汇总记录
2020/11/29 Javascript
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
跟老齐学Python之Python安装
2014/09/12 Python
在Python web中实现验证码图片代码分享
2017/11/09 Python
浅谈numpy库的常用基本操作方法
2018/01/09 Python
Python sklearn KFold 生成交叉验证数据集的方法
2018/12/11 Python
python切片的步进、添加、连接简单操作示例
2019/07/11 Python
python3.6生成器yield用法实例分析
2019/08/23 Python
python关闭占用端口方式
2019/12/17 Python
HTML5 创建canvas元素示例代码
2014/06/04 HTML / CSS
html5的canvas方法使用指南
2014/12/15 HTML / CSS
数以千计的折扣工业产品:ESE Direct
2018/05/20 全球购物
2014年远程教育工作总结
2014/12/09 职场文书
信息技术研修心得体会
2016/01/08 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书