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之undefined篇(上)
Nov 22 Javascript
js中将URL中的参数提取出来作为对象的实现代码
Aug 16 Javascript
JS中toFixed()方法引起的问题如何解决
Nov 20 Javascript
JS批量修改PS中图层名称的方法
Jan 26 Javascript
浅析JavaScript Array和string的转换(推荐)
May 20 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
Nov 22 Javascript
javascript表单正则应用
Feb 04 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
Jul 28 Javascript
浅谈Node Inspector 代理实现
Oct 19 Javascript
vue v-model动态生成详解
Jun 30 Javascript
浅谈Vue组件及组件的注册方法
Aug 24 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字符转义相关函数小结(php下的转义字符串)
2007/04/12 PHP
PHP批量获取网页中所有固定种子链接的方法
2016/11/18 PHP
php判断是否为ajax请求的方法
2016/11/29 PHP
php面向对象的用户登录身份验证
2017/06/08 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
JSON格式化输出
2014/11/10 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
详解nodejs 文本操作模块-fs模块(四)
2016/12/22 NodeJs
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
vuejs使用递归组件实现树形目录的方法
2017/09/30 Javascript
微信小程序返回多级页面的实现方法
2017/10/27 Javascript
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
详解Vue This$Store总结
2018/12/17 Javascript
少女风vue组件库的制作全过程
2019/05/15 Javascript
Vue程序调试的方法
2019/06/17 Javascript
webpack 动态批量加载文件的实现方法
2020/03/19 Javascript
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
python打开url并按指定块读取网页内容的方法
2015/04/29 Python
一波神奇的Python语句、函数与方法的使用技巧总结
2015/12/08 Python
Python数据库的连接实现方法与注意事项
2016/02/27 Python
python 打印对象的所有属性值的方法
2016/09/11 Python
python3如何将docx转换成pdf文件
2018/03/23 Python
wx.CheckBox创建复选框控件并响应鼠标点击事件
2018/04/25 Python
Django框架静态文件使用/中间件/禁用ip功能实例详解
2019/07/22 Python
在pandas中遍历DataFrame行的实现方法
2019/10/23 Python
python如何使用代码运行助手
2020/07/03 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
兰蔻美国官网:Lancome美国
2017/04/25 全球购物
阿姆斯特丹杜莎夫人蜡像馆官方网站:Madame Tussauds Amsterdam
2019/03/12 全球购物
物业保安主管岗位职责
2013/12/25 职场文书
小学生运动会报道稿
2014/09/12 职场文书
向女朋友道歉的话
2015/01/20 职场文书
2015年学生会干事工作总结
2015/04/09 职场文书
初中军训感想
2015/08/07 职场文书
幼儿园中班教育随笔
2015/08/14 职场文书
Spring中的@Transactional的工作原理
2022/06/05 Java/Android