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 提升运行速度之循环篇 译文
Aug 15 Javascript
jQuery 表单验证扩展代码(一)
Oct 11 Javascript
自制基于jQuery的智能提示插件一枚
Feb 18 Javascript
jquery的相对父元素和相对文档定位示例代码
Aug 02 Javascript
JS图片无缝、平滑滚动代码
Mar 11 Javascript
再JavaScript的jQuery库中编写动画效果的指南
Aug 13 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
Feb 16 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
Aug 27 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
Oct 24 Javascript
微信小程序之左右布局的实现代码
Dec 13 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 Javascript
Javascript原型链及instanceof原理详解
May 25 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/05/10 PHP
php安全配置 如何配置使其更安全
2011/12/16 PHP
基于php实现的php代码加密解密类完整实例
2016/10/12 PHP
Yii Framework框架使用PHPExcel组件的方法示例
2019/07/24 PHP
用javascript操作xml
2006/11/04 Javascript
用javascript实现的仿Flash广告图片轮换效果
2007/04/24 Javascript
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
2012/06/20 Javascript
js防止表单重复提交实现代码
2012/09/05 Javascript
jquery zTree异步加载简单实例分享
2013/02/05 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
2013/08/28 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
2013/11/08 Javascript
seajs学习教程之基础篇
2016/10/20 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
2017/06/29 jQuery
详解vue引入子组件方法
2019/02/12 Javascript
JS回调函数深入理解
2019/10/16 Javascript
微信小程序使用echarts获取数据并生成折线图
2019/10/16 Javascript
基于python指定包的安装路径方法
2018/10/27 Python
python try 异常处理(史上最全)
2019/03/07 Python
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
Django 拆分model和view的实现方法
2019/08/16 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
flask 框架操作MySQL数据库简单示例
2020/02/02 Python
小学新学期教师寄语
2014/01/18 职场文书
财务出纳岗位职责
2014/02/03 职场文书
社区工作感言
2014/02/21 职场文书
优秀工会工作者事迹材料
2014/06/02 职场文书
幼儿园教师节演讲稿
2014/09/03 职场文书
党员群众路线学习心得体会
2014/11/04 职场文书
公司经营目标责任书
2015/01/29 职场文书
创业计划书之烤红薯
2019/09/26 职场文书
如何用python反转图片,视频
2021/04/24 Python
十大经典日本动漫排行榜 海贼王第三,犬夜叉仅第八
2022/03/18 日漫
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL
Vue2项目中对百度地图的封装使用详解
2022/06/16 Vue.js
GO中sync包自由控制并发示例详解
2022/08/05 Golang