微信小程序实现随机验证码功能


Posted in Javascript onDecember 20, 2018

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

效果图:

微信小程序实现随机验证码功能

小程序上经常会有一些注册 申请页面需要用到随机验证码。具体实现方法不多说 直接上代码

<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
    })
  },

 
})

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

Javascript 相关文章推荐
Jquery之美中不足小结
Feb 16 Javascript
js中将URL中的参数提取出来作为对象的实现代码
Aug 16 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
Sep 06 Javascript
JavaScript 闭包详细介绍
Sep 28 Javascript
Bootstrap输入框组件简单实现代码
Mar 06 Javascript
JavaScript 过滤关键字
Mar 20 Javascript
区别JavaScript函数声明与变量声明
Sep 12 Javascript
微信小程序使用canvas的画图操作示例
Jan 18 Javascript
jQuery zTree插件快速实现目录树
Aug 16 jQuery
关于JSON解析的实现过程解析
Oct 08 Javascript
javascript前端和后台进行数据交互方法示例
Aug 07 Javascript
mustache.js实现首页元件动态渲染的示例代码
Dec 28 Javascript
微信小程序实现发送验证码按钮效果
Dec 20 #Javascript
使用puppeteer爬取网站并抓出404无效链接
Dec 20 #Javascript
详解如何使用node.js的开发框架express创建一个web应用
Dec 20 #Javascript
js canvas实现橡皮擦效果
Dec 20 #Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
Dec 20 #Javascript
Cocos2d实现刮刮卡效果
Dec 20 #Javascript
浅谈Fetch 数据交互方式
Dec 20 #Javascript
You might like
php下载远程文件类(支持断点续传)
2008/11/14 PHP
ThinkPHP 3.2 数据分页代码分享
2014/10/14 PHP
PHPCMS手机站伪静态设置详细教程
2017/02/06 PHP
从javascript语言本身谈项目实战
2006/12/27 Javascript
IE autocomplete internet explorer's autocomplete
2007/06/30 Javascript
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
2014/03/19 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
浅谈Javascript 数组与字典
2015/01/29 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
2015/03/04 Javascript
js的flv视频播放器插件使用方法
2015/06/23 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
2016/07/07 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
2017/11/10 Javascript
JavaScript实现简单的图片切换功能(实例代码)
2020/04/10 Javascript
[53:03]Optic vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
使用Turtle画正螺旋线的方法
2017/09/22 Python
python中单下划线_的常见用法总结
2018/07/10 Python
python读取几个G的csv文件方法
2019/01/07 Python
python opencv实现图像边缘检测
2019/04/29 Python
python3的url编码和解码,自定义gbk、utf-8的例子
2019/08/22 Python
Python实现简单猜数字游戏
2021/02/03 Python
Zooplus葡萄牙:欧洲领先的网上宠物商店
2018/07/01 全球购物
Flesh Beauty官网:露华浓集团旗下彩妆品牌
2021/02/15 全球购物
惠而浦美国官网:Whirlpool.com
2021/01/19 全球购物
办理生育手续介绍信
2014/01/14 职场文书
2014年卫生保健工作总结
2014/12/08 职场文书
简历自我评价优缺点
2015/03/11 职场文书
环保主题班会教案
2015/08/13 职场文书
教师研修随笔感言
2015/11/18 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书
小学生禁毒教育心得体会
2016/01/15 职场文书
纪检干部学习心得体会
2016/01/23 职场文书
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python
Python Pandas 删除列操作
2022/03/16 Python
集英社今正式宣布 成立游戏公司“集英社Games”
2022/03/31 其他游戏
JS实现简单九宫格抽奖
2022/06/28 Javascript