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


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 相关文章推荐
jquery序列化表单以及回调函数的使用示例
Jul 02 Javascript
Bootstrap入门书籍之(三)栅格系统
Feb 17 Javascript
Bootstrap Paginator分页插件使用方法详解
May 30 Javascript
jQuery插件实现图片轮播特效
Jun 16 Javascript
AngularJS中的API(接口)简单实现
Jul 28 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
Oct 10 Javascript
JavaScript实现重力下落与弹性效果的方法分析
Dec 20 Javascript
Vue SSR 组件加载问题
May 02 Javascript
vue动态绑定class选中当前列表变色的方法示例
Dec 19 Javascript
js实现京东秒杀倒计时功能
Jan 21 Javascript
超简单的微信小程序轮播图
Nov 22 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
Aug 03 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
DC《神奇女侠2》因疫情推迟上映 温子仁新恐怖片《恶性》撤档
2020/04/09 欧美动漫
解析php中array_merge与array+array的区别
2013/06/21 PHP
php使用qr生成二维码的示例分享
2014/01/20 PHP
php文件下载处理方法分析
2015/04/22 PHP
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
2016/09/11 PHP
PHP函数按引用传递参数及函数可选参数用法示例
2018/06/04 PHP
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
jQuery Validation插件remote验证方式的Bug解决
2010/07/01 Javascript
js代码实现随机颜色的小方块
2015/07/30 Javascript
微信小程序 video详解及简单实例
2017/01/16 Javascript
JavaScript实现替换字符串中最后一个字符的方法
2017/03/07 Javascript
nodejs入门教程六:express模块用法示例
2017/04/24 NodeJs
详解Vue.js v-for不支持IE9的解决方法
2018/12/29 Javascript
详解vue挂载到dom上会发生什么
2019/01/20 Javascript
typescript nodejs 依赖注入实现方法代码详解
2019/07/21 NodeJs
解决vue的过渡动画无法正常实现问题
2019/10/31 Javascript
浅谈Three.js截图并下载的大坑
2019/11/01 Javascript
小程序表单认证布局及验证详解
2020/06/19 Javascript
Python字符串匹配算法KMP实例
2015/07/18 Python
使用python实现链表操作
2018/01/26 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
Python实现网站表单提交和模板
2019/01/15 Python
Python3 文章标题关键字提取的例子
2019/08/26 Python
python @propert装饰器使用方法原理解析
2019/12/25 Python
nginx搭建基于python的web环境的实现步骤
2020/01/03 Python
python编写扎金花小程序的实例代码
2021/02/23 Python
AmazeUI 按钮交互的实现示例
2020/08/24 HTML / CSS
美国领先的户外服装与装备用品店:Moosejaw
2016/08/25 全球购物
安全资料员岗位职责
2013/12/14 职场文书
五好党支部事迹材料
2014/02/06 职场文书
庆六一宣传标语
2014/10/08 职场文书
个人公司授权委托书范本
2014/10/12 职场文书
go语言map与string的相互转换的实现
2021/04/07 Golang
Python中seaborn库之countplot的数据可视化使用
2021/06/11 Python
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis
python对文档中元素删除,替换操作
2022/04/02 Python