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 美元符冲突的解决方法
Mar 28 Javascript
angularjs 处理多个异步请求方法汇总
Jan 06 Javascript
js简单工厂模式用法实例
Jun 30 Javascript
javascript实现五星评分功能
Nov 10 Javascript
简单的JS时钟实例讲解
Jan 13 Javascript
jQuery layui常用方法介绍
Jul 25 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
Nov 04 Javascript
three.js实现围绕某物体旋转
Jan 25 Javascript
详解weex默认webpack.config.js改造
Jan 08 Javascript
vue 使用原生组件上传图片的实例
Sep 08 Javascript
JS实现密码框效果
Sep 10 Javascript
JavaScript canvas实现雨滴特效
Jan 10 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过滤敏感词的示例
2014/03/31 PHP
PHP版微信公众平台红包API
2015/04/02 PHP
PHP get_html_translation_table()函数用法讲解
2019/02/16 PHP
javascript对象的property和prototype是这样一种关系
2007/03/24 Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
2010/08/01 Javascript
读jQuery之六 缓存数据功能介绍
2011/06/21 Javascript
原生javascript模仿win8等待提示圆圈进度条
2014/04/24 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
2016/12/14 Javascript
Angular2 路由问题修复详解
2017/03/01 Javascript
React Native 环境搭建的教程
2017/08/19 Javascript
vue几个常用跨域处理方式介绍
2018/02/07 Javascript
vue+webpack实现异步加载三种用法示例详解
2018/04/24 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
小程序页面动态配置实现方法
2019/02/05 Javascript
小程序实现搜索框功能
2020/03/26 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
2020/07/20 Javascript
一篇文章带你从零快速上手Rollup
2020/09/07 Javascript
vue监听滚动事件的方法
2020/12/21 Vue.js
[24:42]VP vs TNC Supermajor小组赛B组 BO3 第三场 6.2
2018/06/03 DOTA
python简单文本处理的方法
2015/07/10 Python
Python数组遍历的简单实现方法小结
2016/04/27 Python
简介Python的collections模块中defaultdict类型的用法
2016/07/07 Python
Python矩阵常见运算操作实例总结
2017/09/29 Python
解决Atom安装Hydrogen无法运行python3的问题
2019/08/28 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
Python常用模块函数代码汇总解析
2020/08/31 Python
土木工程实习生自我鉴定
2013/09/19 职场文书
小学生读书感言
2014/02/12 职场文书
教师专业自荐信
2014/05/31 职场文书
成绩单评语
2015/01/04 职场文书
2015年小学数学教研组工作总结
2015/05/21 职场文书
首次购房证明
2015/06/19 职场文书
导游词之黄果树瀑布
2019/09/20 职场文书
实现GO语言对数组切片去重
2022/04/20 Golang