js随机生成一个验证码


Posted in Javascript onJune 01, 2017

之前接触过的验证码都是图片,今天碰到了一个用js生成随机验证码的demo,拿来敲一敲和大家分享。

效果:

js随机生成一个验证码

html代码:

<p>验证码:</p>
 <div id="login" onclick="change()">
  <a href="#" rel="external nofollow" ></a>
 </div>

给div设置了一个click点击事件,js代码如下:

function getCode(n) {
  var all = "azxcvbnmsdfghjklqwertyuiopZXCVBNMASDFGHJKLQWERTYUIOP0123456789";
  var b = "";
  for (var i = 0; i < n; i++) {
   var index = Math.floor(Math.random() * 62);
   b += all.charAt(index);

  }
  return b;
 };

 function change() {
  document.getElementById("login").innerHTML = getCode(4);

 }
 window.onload = change;

定义一个变量,令它的值为26个字母和0-9十个数字。

Math.random()是令系统随机选取大于等于 0.0 且小于 1.0 的伪随机double 值。
例如:Math.random()*62 得到的值:

js随机生成一个验证码

Math.floor 是对一个数字向下取整,之前在博客里面有提到过。

charAt方法可返回指定位置的字符,之前在博客里面也有提到过。

这些都已经很熟悉了,就当作是复习一遍吧。

拿到随机的四个数字,拼接到div标签里。就得到了想要的效果。

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

Javascript 相关文章推荐
如何实现JS函数的重载
Sep 22 Javascript
通用JS事件写法实现代码
Jan 07 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
Jun 11 Javascript
jQuery验证插件validation使用指南
Apr 21 Javascript
基于replaceChild制作简单的吞噬特效
Sep 21 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
Apr 01 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
May 22 Javascript
关于webpack2和模块打包的新手指南(小结)
Aug 07 Javascript
react-native之ART绘图方法详解
Aug 08 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
Aug 24 Javascript
详解swiper在vue中的应用(以3.0为例)
Sep 20 Javascript
ES6 解构赋值的原理及运用
May 25 Javascript
JS实现简单抖动效果
Jun 01 #Javascript
深入理解vue中的$set
Jun 01 #Javascript
详解angular中的作用域及继承
May 31 #Javascript
Node学习记录之cluster模块
May 31 #Javascript
Express框架之connect-flash详解
May 31 #Javascript
node.js中express-session配置项详解
May 31 #Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 #Javascript
You might like
PHP 上传文件大小限制
2009/07/05 PHP
php的list()的一步操作给一组变量进行赋值的使用
2011/05/18 PHP
PHP表单递交控件名称含有点号(.)会被转化为下划线(_)的处理方法
2013/01/06 PHP
php简单读取.vcf格式文件的方法示例
2017/09/02 PHP
基于jquery的loading 加载提示效果实现代码
2011/09/01 Javascript
jQuery 一个图片切换的插件
2011/10/09 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
详解JavaScript数组的操作大全
2015/10/19 Javascript
jQuery中DOM节点删除之empty与remove
2017/01/20 Javascript
nodejs中sleep功能实现暂停几秒的方法
2017/07/12 NodeJs
vue学习笔记之v-if和v-show的区别
2017/09/20 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
2017/11/27 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
关于Node.js中频繁修改代码重启服务器的问题
2020/10/15 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
2020/12/24 Javascript
Python原始字符串与Unicode字符串操作符用法实例分析
2017/07/22 Python
详解Python使用tensorflow入门指南
2018/02/09 Python
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
python dataframe astype 字段类型转换方法
2018/04/11 Python
Python使用numpy产生正态分布随机数的向量或矩阵操作示例
2018/08/22 Python
20行python代码的入门级小游戏的详解
2019/05/05 Python
为什么黑客都用python(123个黑客必备的Python工具)
2020/01/31 Python
HTML5打开本地app应用的方法
2016/03/31 HTML / CSS
大学生自我评价怎样写好
2013/10/23 职场文书
导游的职业规划书范文
2013/12/27 职场文书
《在大海中永生》教学反思
2014/02/24 职场文书
银行先进个人事迹材料
2014/05/11 职场文书
保险公司开门红口号
2014/06/21 职场文书
环保项目建议书
2014/08/26 职场文书
代收款委托书范本
2014/10/01 职场文书
综合测评自我评价
2015/03/06 职场文书
大学考试作弊检讨书
2015/05/06 职场文书
大学学生会竞选稿
2015/11/19 职场文书
给原生html中添加水印遮罩层的实现示例
2021/04/02 Javascript
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL