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


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 相关文章推荐
对YUI扩展的Gird组件 Part-1
Mar 10 Javascript
jQuery制作效果超棒的手风琴折叠菜单
Apr 03 Javascript
jQuery实现自定义右键菜单的树状菜单效果
Sep 02 Javascript
js 实现省市区三级联动菜单效果
Feb 20 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
Feb 28 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
Mar 03 Javascript
详解swiper在vue中的应用(以3.0为例)
Sep 20 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
Sep 26 Javascript
微信小程序 数据缓存实现方法详解
Aug 26 Javascript
浅析Vue下的components模板使用及应用
Nov 27 Javascript
Vue父子之间值传递的实例教程
Jul 02 Javascript
vue使用echarts画组织结构图
Feb 06 Vue.js
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
第八节--访问方式
2006/11/16 PHP
PHP中cookies使用指南
2007/03/16 PHP
PHP实现的博客欢迎提示功能(很特别哦)
2014/06/05 PHP
对PHP语言认识上需要避免的10大误区
2014/06/12 PHP
php使用curl获取header检测开启GZip压缩的方法
2018/08/15 PHP
Laravel 默认邮箱登录改成用户名登录的实现方法
2019/08/12 PHP
js实现运行代码需要刷新的解决方法
2007/08/18 Javascript
打造基于jQuery的高性能TreeView(asp.net)
2011/02/23 Javascript
Prototype源码浅析 Enumerable部分之each方法
2012/01/16 Javascript
jquery struts 验证唯一标识(公用方法)
2013/03/27 Javascript
jquery动态增加text元素以及删除文本内容实例代码
2013/07/01 Javascript
微信小程序 http请求详细介绍
2016/10/09 Javascript
AngularJS 中的数据源的循环输出
2017/10/12 Javascript
js中let能否完全替代IIFE
2019/06/15 Javascript
JS实现碰撞检测效果
2020/03/12 Javascript
Vue简单实现原理详解
2020/05/07 Javascript
Vue实现多页签组件
2021/01/14 Vue.js
[48:46]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第二场 11.19
2020/11/19 DOTA
Python 多线程Threading初学教程
2017/08/22 Python
python实现俄罗斯方块游戏
2020/03/25 Python
tensor和numpy的互相转换的实现示例
2019/08/02 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
python3中for循环踩过的坑记录
2020/12/14 Python
一款纯css3实现的动画加载导航
2014/10/08 HTML / CSS
在HTML5 Canvas中放入图片和保存为图片的方法
2014/05/03 HTML / CSS
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
华为慧通面试题
2012/09/11 面试题
秋季红领巾广播稿
2014/01/27 职场文书
创先争优承诺书范文
2014/03/31 职场文书
竞选村长演讲稿
2014/04/28 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
淘宝客服专员岗位职责
2015/04/07 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
企业年会祝酒词
2015/08/11 职场文书
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle
详解TypeScript的基础类型
2022/02/18 Javascript