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和css代码压缩工具[附JAVA环境配置方法]
Apr 16 Javascript
javascript之querySelector和querySelectorAll使用说明
Oct 09 Javascript
js事件冒泡实例分享(已测试)
Apr 23 Javascript
javascript抖动元素的小例子
Oct 28 Javascript
extjs 时间范围选择自动判断的实现代码
Jun 24 Javascript
vue.js入门教程之基础语法小结
Sep 01 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
Mar 01 Javascript
基于vue实现分页/翻页组件paginator示例
Mar 09 Javascript
highcharts 在angular中的使用示例代码
Sep 20 Javascript
Node.js中sequelize时区的配置方法
Dec 10 Javascript
详解javascript 变量提升(Hoisting)
Mar 12 Javascript
javascript 数组精简技巧小结
Feb 26 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
Laravel如何友好的修改.env配置文件详解
2017/06/07 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
JavaScript的document对象和window对象详解
2010/12/30 Javascript
jquery获取下拉列表的值为null的解决方法
2011/03/18 Javascript
js中如何把字符串转化为对象、数组示例代码
2013/07/17 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
2013/08/02 Javascript
异步动态加载JS并运行(示例代码)
2013/12/13 Javascript
jQuery中offset()方法用法实例
2015/01/16 Javascript
基于JS实现Android,iOS一个手势动画效果
2016/04/27 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
微信小程序中做用户登录与登录态维护的实现详解
2017/05/17 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
vue3.0 上手体验
2020/09/21 Javascript
解决pycharm双击但是无法打开的情况
2020/10/31 Javascript
[00:06]Yes,it worked!小卡尔成功穿越时空加入战场!
2019/07/20 DOTA
Python作用域用法实例详解
2016/03/15 Python
Python画图学习入门教程
2016/07/01 Python
python 读取文件并替换字段的实例
2018/07/12 Python
基于Python打造账号共享浏览器功能
2019/05/30 Python
如何在Django配置文件里配置session链接
2019/08/06 Python
Python爬虫requests库多种用法实例
2020/05/28 Python
HTML5网页音乐播放器的示例代码
2017/11/09 HTML / CSS
微软香港官网及网上商店:Microsoft HK
2016/09/01 全球购物
Sql面试题
2013/03/20 面试题
研究生毕业自我鉴定范文
2014/03/27 职场文书
单位单身证明样本
2014/10/11 职场文书
酒店宣传语大全
2015/07/13 职场文书
《我们的民族小学》教学反思
2016/02/19 职场文书
大学生自我鉴定怎么写
2019/05/07 职场文书
浅谈Python项目的服务器部署
2021/04/25 Python
CSS 新特性 contain控制页面的重绘与重排问题
2021/04/30 HTML / CSS
SpringCloud Alibaba 基本开发框架搭建过程
2021/06/13 Java/Android
vue+echarts实现多条折线图
2022/03/21 Vue.js
Apache SkyWalking 监控 MySQL Server 实战解析
2022/09/23 Servers