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 相关文章推荐
JQuery 将元素显示在屏幕的中央的代码
Feb 27 Javascript
javascript学习笔记(十) js对象 继承
Jun 19 Javascript
JQuery在页面中添加和除移DOM示例代码
Jun 24 Javascript
js+css实现文字散开重组动画特效代码分享
Aug 21 Javascript
Js实现中国公民身份证号码有效性验证实例代码
May 03 Javascript
JS 实现分页打印功能
May 16 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
Mar 07 Javascript
javascript中call()、apply()的区别
Mar 21 Javascript
小程序云开发获取不到数据库记录的解决方法
May 18 Javascript
vue实现多级菜单效果
Oct 19 Javascript
vue中使用GraphQL的实例代码
Nov 04 Javascript
如何将Node.js中的回调转换为Promise
Nov 10 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的微信公众平台开发入门实例
2015/04/15 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
PHP微信开发之查询微信精选文章
2016/06/23 PHP
微信开发之php表单微信中自动提交两次问题解决办法
2017/01/08 PHP
firefox火狐浏览器与与ie兼容的2个问题总结
2010/07/20 Javascript
什么是DOM(Document Object Model)文档对象模型
2012/03/05 Javascript
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
浅谈JavaScript Date日期和时间对象
2014/12/29 Javascript
javascript实现树形菜单的方法
2015/07/17 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
2016/05/26 Javascript
纯JS实现可拖拽表单的简单实例
2016/09/02 Javascript
Angular 4.x 动态创建表单实例
2017/04/25 Javascript
Js逆向实现滑动验证码图片还原的示例代码
2020/03/10 Javascript
[01:04:49]KG vs LGD 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python检测远程端口是否打开的方法
2015/03/14 Python
python snownlp情感分析简易demo(分享)
2017/06/04 Python
Python字符编码与函数的基本使用方法
2017/09/30 Python
Python Numpy库安装与基本操作示例
2019/01/08 Python
python selenium 查找隐藏元素 自动播放视频功能
2019/07/24 Python
python中数据库like模糊查询方式
2020/03/02 Python
美国奢侈品购物平台:Orchard Mile
2018/05/02 全球购物
以设计师精品品质提供快速时尚:Mostata
2019/05/10 全球购物
JSF面试题:Jsf中的核心类用那些?有什么作用?LiftCycle六大生命周期是什么?
2014/07/17 面试题
EJB timer的种类
2014/10/28 面试题
高中运动会广播稿
2014/01/21 职场文书
展会邀请函范文
2014/01/26 职场文书
小学中秋节活动方案
2014/02/06 职场文书
网吧最新创业计划书范文
2014/03/27 职场文书
村干部承诺书
2014/03/28 职场文书
2014年学习部工作总结
2014/11/12 职场文书
2014年银行信贷员工作总结
2014/12/08 职场文书
结婚司仪主持词
2015/06/29 职场文书
大学优秀学生主要事迹材料
2015/11/04 职场文书
HR在给员工开具离职证明时,需要注意哪些问题?
2019/07/03 职场文书
python自然语言处理之字典树知识总结
2021/04/25 Python
opencv读取视频并保存图像的方法
2021/06/04 Python