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


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 相关文章推荐
B/S开发中常用javaScript技术与代码
Mar 09 Javascript
QUnit jQuery的TDD框架
Nov 04 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
Jun 09 Javascript
兼容主流浏览器的JS复制内容到剪贴板
Dec 12 Javascript
js实现浏览本地文件并显示扩展名的方法
Aug 17 Javascript
Bootstrap每天必学之媒体对象
Nov 30 Javascript
深入浅析Node.js单线程模型
Jul 10 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
Dec 16 Javascript
es6新特性之 class 基本用法解析
May 05 Javascript
JavaScript函数节流和函数去抖知识点学习
Jul 31 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
Sep 12 Javascript
详解vue身份认证管理和租户管理
May 25 Vue.js
微信小程序实现发送验证码按钮效果
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 截取字符串专题集合
2010/08/19 PHP
ThinkPHP之N方法实例详解
2014/06/20 PHP
php+ajax制作无刷新留言板
2015/10/27 PHP
PHP实现提高SESSION响应速度的几种方法详解
2019/08/09 PHP
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
通过正则格式化url查询字符串实现代码
2012/12/28 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
2013/07/04 Javascript
60行js代码实现俄罗斯方块
2015/03/31 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
2016/05/25 Javascript
简单的js表格操作
2016/09/24 Javascript
vue.js使用v-if实现显示与隐藏功能示例
2018/07/06 Javascript
彻底弄懂 JavaScript 执行机制
2018/10/23 Javascript
mockjs+vue页面直接展示数据的方法
2018/12/19 Javascript
详解vue在项目中使用百度地图
2019/03/26 Javascript
[01:34]DAC2018主赛事第四日五佳镜头 Gh巨牙海民助Miracle-死里逃生
2018/04/07 DOTA
在Lighttpd服务器中运行Django应用的方法
2015/07/22 Python
Kali Linux安装ipython2 和 ipython3的方法
2019/07/11 Python
python实现图片中文字分割效果
2019/07/22 Python
python数据类型可变不可变知识点总结
2020/03/06 Python
探秘TensorFlow 和 NumPy 的 Broadcasting 机制
2020/03/13 Python
Python编写单元测试代码实例
2020/09/10 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
html5实现滑块功能之type=&quot;range&quot;属性
2020/02/18 HTML / CSS
DJI大疆德国官方商城:大疆无人机
2018/09/01 全球购物
Gretna Green中文官网:苏格兰格林小镇
2019/10/16 全球购物
java程序员面试交流
2012/11/29 面试题
大学毕业感言100字
2014/02/03 职场文书
本科毕业生求职自荐信
2014/02/03 职场文书
幼儿园六一亲子活动方案
2014/08/26 职场文书
村支部书记群众路线对照检查材料思想汇报
2014/10/08 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
六一儿童节开幕词
2015/01/29 职场文书
教师素质教育心得体会
2016/01/19 职场文书
html5 录制mp3音频支持采样率和比特率设置
2021/07/15 Javascript