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 相关文章推荐
jquery ajax 局部无刷新更新数据的实现案例
Feb 08 Javascript
解析Node.js异常处理中domain模块的使用方法
Feb 16 Javascript
js H5 canvas投篮小游戏
Aug 18 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Sep 29 Javascript
浅析如何利用angular结合translate为项目实现国际化
Dec 08 Javascript
JavaScript闭包和范围实例详解
Dec 19 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
Jun 04 Javascript
ionic 自定义弹框效果
Jun 27 Javascript
浅谈vue-lazyload实现的详细过程
Aug 22 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 Javascript
解决layui的table插件无法多层级获取json数据的问题
Sep 19 Javascript
js实现点击上传图片并设为模糊背景
Aug 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提示Notice: Undefined variable的解决办法
2012/11/24 PHP
PHP+MySQL使用mysql_num_rows实现模糊查询图书信息功能
2018/05/31 PHP
Laravel 关联模型-关联新增和关联更新的方法
2019/10/10 PHP
javascript 字符串连接的性能问题(多浏览器)
2008/11/18 Javascript
javascript 日期时间函数(经典+完善+实用)
2009/05/27 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
jQuery鼠标事件总结
2016/10/13 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
2018/09/01 Javascript
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
微信小程序报错: thirdScriptError的错误问题
2020/06/19 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
python多线程编程方式分析示例详解
2013/12/06 Python
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
python使用MySQLdb访问mysql数据库的方法
2015/08/03 Python
python实现扫描日志关键字的示例
2018/04/28 Python
python直接获取API传递回来的参数方法
2018/12/17 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
python读写Excel表格的实例代码(简单实用)
2019/12/19 Python
Pytorch使用MNIST数据集实现基础GAN和DCGAN详解
2020/01/10 Python
dpn网络的pytorch实现方式
2020/01/14 Python
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
学校后勤人员职责
2013/12/27 职场文书
群众路线批评与自我批评
2014/02/06 职场文书
一般党员对照检查材料
2014/09/24 职场文书
银行转正自我鉴定
2014/09/29 职场文书
销售工作决心书
2015/02/04 职场文书
毕业论文致谢格式模板
2015/05/14 职场文书
歌舞青春观后感
2015/06/10 职场文书
Python数据分析入门之教你怎么搭建环境
2021/05/13 Python
Golang使用Panic与Recover进行错误捕获
2022/03/22 Golang
Centos系统通过Docker安装并搭建MongoDB数据库
2022/04/12 MongoDB