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 相关文章推荐
JSON扫盲帖 JSON.as类教程
Feb 16 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
Mar 24 Javascript
JavaScript实现广告的关闭与显示效果实例
Jul 02 Javascript
浅谈js的html元素的父节点,子节点
Aug 06 Javascript
js Canvas实现圆形时钟教程
Sep 19 Javascript
javascript加载xml 并解析各节点的值(实现方法)
Oct 12 Javascript
javascript淘宝主图放大镜功能
Oct 20 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
Jan 03 Javascript
Web 开发中Ajax的Session 超时处理方法
Jan 19 Javascript
详解vue更改头像功能实现
Apr 28 Javascript
jQuery表单选择器用法详解
Aug 22 jQuery
JavaScript如何判断input数据类型
Feb 06 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的开发框架的现状和展望
2007/03/16 PHP
国外PHP程序员的13个好习惯小结
2012/02/20 PHP
destoon整合ucenter后注册页面不跳转的解决方法
2014/06/21 PHP
php基于mcrypt的加密解密实例
2014/10/27 PHP
WordPress自定义时间显示格式
2015/03/27 PHP
PHP大文件分片上传的实现方法
2018/10/28 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
javascript String 对象
2008/04/25 Javascript
nodejs实现黑名单中间件设计
2014/06/17 NodeJs
JavaScript中实现异步编程模式的4种方法
2014/09/24 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
jQuery实现平滑滚动到指定锚点的方法
2015/03/20 Javascript
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
分享jQuery网页元素拖拽插件
2020/12/01 Javascript
jQuery简单实现中间浮窗效果
2016/09/04 Javascript
React学习笔记之条件渲染(一)
2017/07/02 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
详谈构造函数加括号与不加括号的区别
2017/10/26 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
2019/01/30 Javascript
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
python的类变量和成员变量用法实例教程
2014/08/25 Python
python顺序的读取文件夹下名称有序的文件方法
2018/07/11 Python
python实现屏保程序(适用于背单词)
2019/07/30 Python
python实现一个函数版的名片管理系统过程解析
2019/08/27 Python
python 动态调用函数实例解析
2019/10/21 Python
Tensorflow训练MNIST手写数字识别模型
2020/02/13 Python
迪卡侬印度官网:购买所有体育用品
2017/06/24 全球购物
与C++相比,Java中的数组有什么不同
2014/03/25 面试题
高中生自我评价个人范文
2013/11/09 职场文书
庆七一活动方案
2014/01/25 职场文书
大学生活动总结怎么写
2014/04/29 职场文书
洗手间标语
2014/06/23 职场文书
全国优秀教师事迹材料
2014/08/26 职场文书
民事和解协议书格式
2014/11/29 职场文书
2015年检察院个人工作总结
2015/05/20 职场文书
2015年环保局工作总结
2015/05/22 职场文书