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

 更新时间:2018年12月20日 16:24:03   作者:子谦呀  
这篇文章主要为大家详细介绍了微信小程序实现随机验证码功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

效果图:

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

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

 
})

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

相关文章

  • Bootstrap基本插件学习笔记之模态对话框(16)

    Bootstrap基本插件学习笔记之模态对话框(16)

    这篇文章主要为大家详细介绍了Bootstrap基本插件学习笔记之模态对话框的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • javascript实现简单的页面右下角提示信息框

    javascript实现简单的页面右下角提示信息框

    本文给大家分享的是使用javascript实现简单的页面右下角提示信息框的方法和示例代码,有需要的小伙伴可以参考下。
    2015-07-07
  • redux处理异步action解决方案

    redux处理异步action解决方案

    这篇文章主要介绍了redux处理异步action解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • javascript实现炫酷的拖动分页

    javascript实现炫酷的拖动分页

    非常酷的javascript拖动分页功能,无缝循环分页,拖动鼠标即可完成分页,鼠标向左拖动回到前一页,向右拖动则翻开第二页,还带有动画特效,着实很不错,界面黑色,非主流风格,相信很多人会喜欢的。
    2015-05-05
  • js 增强型title信息提示效果

    js 增强型title信息提示效果

    js操作div仿title提示信息效果,增强型title信息提示,效果不错。
    2010-06-06
  • OpenLayers3实现图层控件功能

    OpenLayers3实现图层控件功能

    这篇文章主要为大家详细介绍了OpenLayers3实现图层控件功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • react组件基本用法示例小结

    react组件基本用法示例小结

    这篇文章主要介绍了react组件基本用法,结合实例形式分析了react组件传值、生命周期、受控组件和非受控组件等相关操作技巧,需要的朋友可以参考下
    2020-04-04
  • 浅谈Sticky组件的改进实现

    浅谈Sticky组件的改进实现

    这篇文章主要介绍了Sticky组件的改进实现的相关资料,需要的朋友可以参考下
    2016-03-03
  • JavaScript判断用户是否对表单进行了修改的方法

    JavaScript判断用户是否对表单进行了修改的方法

    这篇文章主要介绍了JavaScript判断用户是否对表单进行了修改的方法,实例分析了javascript对表单操作与判定的技巧,需要的朋友可以参考下
    2015-03-03
  • JS搜狐面试题分析

    JS搜狐面试题分析

    这篇文章主要介绍了JS搜狐面试题,涉及javascript数组、字符串及面向对象程序设计相关技巧,需要的朋友可以参考下
    2016-12-12

最新评论