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


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 相关文章推荐
如何确保JavaScript的执行顺序 之jQuery.html深度分析
Mar 03 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
Feb 27 Javascript
Javascript 按位取反运算符 (~)
Feb 04 Javascript
jquery禁用右键示例
Apr 28 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
Apr 21 Javascript
在Html中使用Requirejs进行模块化开发实例详解
Apr 15 Javascript
jQuery如何防止Ajax重复提交
Oct 14 Javascript
Bootstrap CSS组件之导航条(navbar)
Dec 17 Javascript
jquery广告无缝轮播实例
Jan 05 Javascript
使用webpack构建应用的方法步骤
Mar 04 Javascript
微信小程序页面上下滚动效果
Nov 18 Javascript
如何使用Javascript中的this关键字
May 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脚本并取得参数的方法
2016/01/25 PHP
PHP7 windows支持
2021/03/09 PHP
用JQuery 实现的自定义对话框
2007/03/24 Javascript
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
JQUERY 对象与DOM对象之两者相互间的转换
2009/04/27 Javascript
19个很有用的 JavaScript库推荐
2011/06/27 Javascript
javascript实现微信分享
2014/12/23 Javascript
JavaScript中的函数声明和函数表达式区别浅析
2015/03/27 Javascript
js使用cookie记录用户名的方法
2015/11/26 Javascript
理解javascript定时器中的setTimeout与setInterval
2016/02/23 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
2016/03/12 Javascript
js实现图片360度旋转
2017/01/22 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
2017/03/20 Javascript
vue实现点击关注后及时更新列表功能
2018/06/26 Javascript
如何为vuex实现带参数的 getter和state.commit
2019/01/04 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
2020/05/19 Javascript
[01:59]游戏“zheng”当时试玩会
2019/08/21 DOTA
python3.3教程之模拟百度登陆代码分享
2014/01/16 Python
浅谈Matplotlib简介和pyplot的简单使用——文本标注和箭头
2018/01/09 Python
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
春节到了 教你使用python来抢票回家
2020/01/06 Python
Python动态导入模块和反射机制详解
2020/02/18 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
python变量的作用域是什么
2020/05/26 Python
Python 创建守护进程的示例
2020/09/29 Python
俄罗斯卫浴采暖及维修用品超级市场:Dkrussia
2020/05/12 全球购物
市场营销专业推荐信
2013/11/03 职场文书
教师岗位职责
2013/11/17 职场文书
80后职场人的职业生涯规划
2014/03/08 职场文书
战略合作协议书范本
2014/04/18 职场文书
组工干部对照检查材料
2014/08/25 职场文书
营销计划书
2015/01/17 职场文书
浅谈PHP7中的一些小技巧
2021/05/29 PHP
解决Git推送错误non-fast-forward的方法
2022/06/25 Servers
JS前端轻量fabric.js系列之画布初始化
2022/08/05 Javascript
Python中np.random.randint()参数详解及用法实例
2022/09/23 Python