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字符串转换成数字与数字转换成字符串的实现方法
Jan 08 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
Jun 24 Javascript
jQuery实现复选框批量选择与反选的方法
Jun 17 Javascript
Vue获取DOM元素样式和样式更改示例
Mar 07 Javascript
Vue axios设置访问基础路径方法
Sep 19 Javascript
微信小程序实现打卡日历功能
Sep 21 Javascript
Windows下Node爬虫神器Puppeteer安装记
Jan 09 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
Apr 13 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
Apr 28 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
Jul 18 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
Nov 04 Javascript
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
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添加文章时生成静态HTML文章的实现代码
2013/02/17 PHP
PHP的Socket通信之UDP通信实例
2015/07/02 PHP
php基于mcrypt_encrypt和mcrypt_decrypt实现字符串加密解密的方法
2016/07/12 PHP
JavaScript 设计模式学习 Factory
2009/07/29 Javascript
网页上的Javascript编辑器和代码格式化
2010/04/25 Javascript
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
JavaScript中的运算符种类及其规则介绍
2013/09/26 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
2014/01/14 Javascript
Javascript 数组排序详解
2014/10/22 Javascript
9款2014最热门jQuery实用特效推荐
2014/12/07 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
给angular加上动画效遇到的问题总结
2016/02/17 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
2016/03/22 Javascript
weUI应用之JS常用信息提示弹层的封装
2016/11/21 Javascript
解决修复npm安装全局模块权限的问题
2018/05/17 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
2019/04/14 Javascript
微信小程序身份证验证方法实现详解
2019/06/28 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
2019/09/17 Javascript
KnockoutJS数组比较算法实例详解
2019/11/25 Javascript
python解析基于xml格式的日志文件
2017/02/25 Python
Python装饰器的执行过程实例分析
2018/06/04 Python
对python中数组的del,remove,pop区别详解
2018/11/07 Python
python中使用ctypes调用so传参设置遇到的问题及解决方法
2019/06/19 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
Python将主机名转换为IP地址的方法
2019/08/14 Python
python闭包与引用以及需要注意的陷阱
2020/09/18 Python
澳大利亚领先的折扣药房:Chemist Direct(有中文站)
2018/11/24 全球购物
美国台面电器和厨具品牌:KitchenAid
2019/04/12 全球购物
个性大学生自我评价
2013/12/04 职场文书
小学运动会入场式解说词
2014/02/18 职场文书
医德医风自我评价
2014/09/19 职场文书
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书
新党章的学习心得体会
2014/11/07 职场文书
构建和谐校园倡议书
2015/01/19 职场文书
美国运营商 T-Mobile 以 117.83Mb/s 的速度排第一位
2022/04/21 数码科技