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 dom 操作详解 js加强
Jul 13 Javascript
jquery做的一个简单的屏幕锁定提示框
Mar 26 Javascript
ActiveX控件与Javascript之间的交互示例
Jun 04 Javascript
jQuery四种选择器使用及示例
Jun 05 Javascript
jQuery中的AjaxSubmit使用讲解
Sep 25 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
Oct 11 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
Nov 01 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
Feb 14 Javascript
vue 实现边输入边搜索功能的实例讲解
Sep 16 Javascript
qrcode生成二维码微信长按无法识别问题的解决
Apr 04 Javascript
JavaScript 性能提升之路(推荐)
Apr 10 Javascript
详解JS预解析原理
Jun 16 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
JS启动应用程序的一个简单例子
2008/05/11 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
2012/01/13 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
2012/06/20 Javascript
JS实现让网页背景图片斜向移动的方法
2015/02/25 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
JS实现带鼠标效果的头像及文章列表代码
2015/09/27 Javascript
深入浅析JavaScript的API设计原则
2016/06/14 Javascript
JavaScript中Array对象用法实例总结
2016/11/29 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
jQuery仿IOS弹出框插件
2017/02/18 Javascript
深入学习 JavaScript中的函数调用
2017/03/23 Javascript
angular4模块中给标签添加背景图的实现方法
2017/09/15 Javascript
深入浅出理解JavaScript闭包的功能与用法
2018/08/01 Javascript
VSCode使用之Vue工程配置eslint
2019/04/30 Javascript
vue中v-model对select的绑定操作
2020/08/31 Javascript
如何在VUE中使用vue-awesome-swiper
2021/01/04 Vue.js
用Python编写一个简单的FUSE文件系统的教程
2015/04/02 Python
python实现class对象转换成json/字典的方法
2016/03/11 Python
视觉直观感受若干常用排序算法
2017/04/13 Python
Python实现将doc转化pdf格式文档的方法
2018/01/19 Python
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
3分钟学会一个Python小技巧
2018/11/23 Python
用Python读取几十万行文本数据
2018/12/24 Python
Python socket 套接字实现通信详解
2019/08/27 Python
Python sublime安装及配置过程详解
2020/06/29 Python
Selenium Webdriver元素定位的八种常用方式(小结)
2021/01/13 Python
ASICS印度官方网站:日本专业运动品牌
2020/06/20 全球购物
采购主管岗位职责
2014/02/01 职场文书
总经理任命书
2014/03/29 职场文书
中班幼儿评语大全
2014/04/30 职场文书
经济管理自荐书
2014/06/09 职场文书
元旦趣味活动方案
2014/08/22 职场文书
民主评议党员工作总结
2014/10/20 职场文书
2015年度党风廉政建设工作情况汇报
2015/01/02 职场文书
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python
Anaconda安装pytorch及配置PyCharm 2021环境
2021/06/04 Python