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跨浏览器实现将字符串转化为xml对象的方法
Sep 25 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
Mar 24 Javascript
简单实现限制uploadify上传个数
Nov 16 Javascript
jQuery插件jquery-barcode实现条码打印的方法
Nov 25 Javascript
分享Javascript实用方法二
Dec 13 Javascript
JS实现的在线调色板实例(附demo源码下载)
Mar 01 Javascript
用AngularJS的指令实现tabs切换效果
Aug 31 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
Jan 04 Javascript
使用grunt合并压缩js和css文件的方法
Mar 02 Javascript
jQuery Position方法使用和兼容性
Aug 23 jQuery
axios发送post请求,提交图片类型表单数据方法
Mar 16 Javascript
JavaScript实现10秒后再次获取验证码
Dec 02 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几个数学计算的内部函数学习整理
2011/08/06 PHP
php实现获取及设置用户访问页面语言类
2014/09/24 PHP
PHP模拟登陆163邮箱发邮件及获取通讯录列表的方法
2015/03/07 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
用YUI做了个标签浏览效果
2007/02/20 Javascript
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
window.ActiveXObject使用说明
2010/11/08 Javascript
简易js代码实现计算器操作
2013/04/15 Javascript
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
Node.js 制作实时多人游戏框架
2015/01/08 Javascript
讲解JavaScript中for...in语句的使用方法
2015/06/03 Javascript
javascript下使用Promise封装FileReader
2016/02/19 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
原生js调用json方法总结
2018/02/22 Javascript
vue写一个组件
2018/04/09 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
2018/05/07 Javascript
在Vue项目中,防止页面被缩放和放大示例
2019/10/28 Javascript
vue如何使用rem适配
2021/02/06 Vue.js
[47:43]Alliance vs KG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python中lambda函数 list comprehension 和 zip函数使用指南
2014/09/28 Python
Python实现抓取HTML网页并以PDF文件形式保存的方法
2018/05/08 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
python线程的几种创建方式详解
2019/08/29 Python
python中如何使用insert函数
2020/01/09 Python
pytorch 计算Parameter和FLOP的操作
2021/03/04 Python
HTML5 textarea高度自适应的两种方案
2020/04/08 HTML / CSS
结构工程研究生求职信
2013/10/13 职场文书
银行财务部实习生的自我鉴定
2013/11/27 职场文书
学习优秀共产党员先进事迹思想报告
2014/09/17 职场文书
自我查摆剖析材料
2014/10/11 职场文书
2015年圣诞节活动总结
2015/03/24 职场文书
后天观后感
2015/06/08 职场文书
2016年学校招生广告语
2016/01/28 职场文书