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

 更新时间:2022年05月24日 08:17:19   作者:子谦呀  
这篇文章主要为大家详细介绍了微信小程序实现随机验证码功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

效果图:

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

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

 
})

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

相关文章

  • 详解webpack es6 to es5支持配置

    详解webpack es6 to es5支持配置

    这篇文章主要介绍了详解webpack es6 to es5支持配置 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • js实现简单的打印表格

    js实现简单的打印表格

    这篇文章主要为大家详细介绍了js实现简单的打印表格,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • JavaScript常用数学函数用法示例

    JavaScript常用数学函数用法示例

    这篇文章主要介绍了JavaScript常用数学函数用法,结合实例形式分析了JavaScript常见的对数、平方、绝对值、正弦、四舍五入等相关数学函数使用技巧,需要的朋友可以参考下
    2018-05-05
  • 如何用js判断dom是否有存在某class的值

    如何用js判断dom是否有存在某class的值

    本文主要介绍了如何用javascript判断dom是否有存在某class的值。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • Javascript Promise用法详解

    Javascript Promise用法详解

    这篇文章主要介绍了Javascript Promise用法详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • JS制作可以选项卡切换的年历

    JS制作可以选项卡切换的年历

    这篇文章主要为大家分享了JS制作类似于选项卡切换的年历,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • ES6的解构赋值实例详解

    ES6的解构赋值实例详解

    解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。这篇文章主要介绍了ES6的解构赋值的实例代码 ,需要的朋友可以参考下
    2019-05-05
  • HTML DOM Viewer

    HTML DOM Viewer

    HTML DOM Viewer...
    2006-09-09
  • template.js前端模板引擎使用详解

    template.js前端模板引擎使用详解

    本篇文章主要介绍了template.js前端模板引擎使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • 可以用来搜索当前页面内容的js代码

    可以用来搜索当前页面内容的js代码

    搜索页面内容的js代码,不过这效率不是很高,大篇幅内容不建议使用。
    2009-12-12

最新评论