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的实现回车键Enter切换焦点
Sep 14 Javascript
js浏览器本地存储store.js介绍及应用
May 13 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
Dec 05 Javascript
jquery 插件实现多行文本框[textarea]自动高度
Mar 04 Javascript
javascript中传统事件与现代事件
Jun 23 Javascript
javascript日期格式化方法小结
Dec 17 Javascript
js实现多图左右切换功能
Aug 04 Javascript
基于javascript实现最简单选项卡切换
Feb 01 Javascript
Vue.js对象转换实例
Jun 07 Javascript
JS使用setInterval实现的简单计时器功能示例
Apr 19 Javascript
在vue中读取本地Json文件的方法
Sep 06 Javascript
vue+element tabs选项卡分页效果
Jun 29 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数组指针操作详解
2017/02/14 PHP
扩展String功能方法
2006/09/22 Javascript
Javascript实例教程(19) 使用HoTMetal(2)
2006/12/23 Javascript
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
2007/02/09 Javascript
javascript 拖放效果实现代码
2010/01/22 Javascript
JS操作Cookies包括(读取添加与删除)
2012/12/26 Javascript
防止xss和sql注入:JS特殊字符过滤正则
2013/04/18 Javascript
JavaScript版的TwoQueues缓存模型
2014/12/29 Javascript
使用nodejs开发cli项目实例
2015/06/03 NodeJs
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
jQuery基本选择器之标签名选择器
2016/09/03 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
2017/01/05 Javascript
微信小程序 解析网页内容详解及实例
2017/02/22 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
2018/09/21 Javascript
vue发送ajax请求详解
2018/10/09 Javascript
跟老齐学Python之编写类之一创建实例
2014/10/11 Python
Python中的赋值、浅拷贝、深拷贝介绍
2015/03/09 Python
Python中的多重装饰器
2015/04/11 Python
Python中的filter()函数的用法
2015/04/27 Python
Python连接MySQL并使用fetchall()方法过滤特殊字符
2016/03/13 Python
Python使用time模块实现指定时间触发器示例
2017/05/18 Python
python爬虫中get和post方法介绍以及cookie作用
2018/02/08 Python
pandas实现excel中的数据透视表和Vlookup函数功能代码
2020/02/14 Python
Python中的wordcloud库安装问题及解决方法
2020/05/27 Python
python访问hdfs的操作
2020/06/06 Python
matplotlib对象拾取事件处理的实现
2021/01/14 Python
python3判断IP地址的方法
2021/03/04 Python
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
HTML5 b和i标记将被赋予真正的语义
2009/07/16 HTML / CSS
化学实验员岗位职责
2013/12/28 职场文书
生物制药自我鉴定
2014/01/25 职场文书
爱国卫生月实施方案
2014/02/21 职场文书
双语教学实施方案
2014/03/23 职场文书
竞聘自述材料
2014/08/25 职场文书
2015年学生会部门工作总结
2015/04/21 职场文书