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 相关文章推荐
javascript之锁定表格栏位
Jun 29 Javascript
JavaScript 克隆数组最简单的方法
Feb 12 Javascript
javascript 复杂的嵌套环境中输出单引号和双引号
May 26 Javascript
jquery获得下拉框值的代码
Aug 13 Javascript
jquery插件制作简单示例说明
Feb 03 Javascript
window.navigate 与 window.location.href 的使用区别介绍
Sep 21 Javascript
javascript中处理时间戳为日期格式的方法
Jan 02 Javascript
jquery each的几种常用的使用方法示例
Jan 21 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
Nov 17 Javascript
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
js HTML5 canvas绘制图片的方法
Sep 08 Javascript
jQuery实现简单弹幕制作
Dec 10 jQuery
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
ThinkPHP实现分页功能
2017/04/28 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
CL vs ForZe BO5 第一场 2.13
2021/03/10 DOTA
JS 日期验证正则附asp日期格式化函数
2009/09/11 Javascript
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
2010/05/18 Javascript
javascript预加载图片、css、js的方法示例介绍
2013/10/14 Javascript
jquery中添加属性和删除属性
2015/06/03 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
2016/09/23 Javascript
JS常用知识点整理
2017/01/21 Javascript
Angular2生命周期钩子函数的详细介绍
2017/07/10 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
详解Vuex管理登录状态
2017/11/13 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
2018/01/09 Javascript
karma+webpack搭建vue单元测试环境的方法示例
2018/05/24 Javascript
[43:58]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第二局
2016/02/27 DOTA
python获取各操作系统硬件信息的方法
2015/06/03 Python
详解Python使用tensorflow入门指南
2018/02/09 Python
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
linux下python使用sendmail发送邮件
2018/05/22 Python
Python OpenCV调用摄像头检测人脸并截图
2020/08/20 Python
重写django的model下的objects模型管理器方式
2020/05/15 Python
五种Python转义表示法
2020/11/27 Python
size?瑞典:英国伦敦的球鞋精品店
2018/03/01 全球购物
Linux如何为某个操作添加别名
2013/03/01 面试题
几个Shell Script面试题
2012/08/31 面试题
中专生自我鉴定
2013/12/17 职场文书
写给保洁员表扬信
2014/01/08 职场文书
自我鉴定书面格式
2014/01/13 职场文书
岗位职责的构建方法
2014/02/01 职场文书
房产公证书范本
2014/04/10 职场文书
房地产广告策划方案
2014/05/15 职场文书
2015年度服装销售工作总结
2015/03/31 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
建议书的格式及范文
2015/09/14 职场文书
新西兰:最新留学学习计划书写作指南
2019/07/15 职场文书
golang DNS服务器的简单实现操作
2021/04/30 Golang