原生js实现数字字母混合验证码的简单实例


Posted in Javascript onDecember 10, 2015

本文实例讲述了原生js实现数字字母混合验证码的全部代码,重点是注释很详细,便于大家理解,特分享给大家供大家参考。具体如下:
运行效果截图如下:

原生js实现数字字母混合验证码的简单实例

具体代码如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="gb2312">
  <title></title>
  <style type="text/css">
    body, div {
      margin: 0;
      padding: 0;
      font-size: 18px;
      font-family: "微软雅黑";
      -webkit-user-selelct: none;
    }

    #code {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -25px;
      margin-left: -50px;
      width: 100px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      border: 1px solid #ff0000;
      cursor: pointer;
      letter-spacing: 5px;
    }
  </style>
</head>
<body>
<div id="code">
  xdF2
</div>
<script type="text/javascript">
  //当前验证码获取的随即范围
  var codeStr = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
  //思想:0-61索引 只需要随机生成4个索引,然后charAt可以获取随机4个索引。
  var oDiv = document.getElementById("code");

  function getRandom(n, m) {
    n = Number(n);       //转换n,m,结果不是数字就是NaN
    m = Number(m);
    if (isNaN(n) || isNaN(m)) {     //判断n,m,是不是有效数字,如果n或m其中一个传入的不是数字
      return Math.random();      //返回 【0-1)之间的随机小数
    }
    if (n > m) {             //如果n大于m,则交换位置
      var temp = n;
      n = m;
      m = temp;
    }
    return Math.round(Math.random() * (m - n) + n);          //返回,取m,n之间的随机整数。
  }


  function getCode() {       
    var str = "";


//定义一个空字符串备用
    for (var i = 0; i < 4; i++) {    //遍历4个索引
      var ran = getRandom(0, 61);      //调用getRandom方法,随机获取一个索引0-61里的随机索引
      str += codeStr.charAt(ran);      //把codeStr字符串里,我们指定获取ran(这个4个索引);
    }
    oDiv.innerHTML = str;       //呈现在页面上
  }

  getCode();              //调用方法
          
  oDiv.onclick = function () {
    getCode();
  }
</script>
</body>
</html>
Javascript 相关文章推荐
利用JS重写Cognos右键菜单的实现代码
Apr 11 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
Aug 16 Javascript
jquery.messager.js插件导致页面抖动的解决方法
Jul 14 Javascript
JavaScript实现页面实时显示当前时间的简单实例
Jul 20 Javascript
Document:getElementsByName()使用方法及示例
Oct 28 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
Jul 18 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
Oct 25 Javascript
jquery+css实现动感的图片切换效果
Nov 25 Javascript
JavaScript中获取时间的函数集
Aug 16 Javascript
Bootstrap作品展示站点实战项目2
Oct 14 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
微信小程序中使用vant框架的具体步骤
Feb 18 Javascript
js实现新年倒计时效果
Dec 10 #Javascript
jquery判断复选框是否选中进行答题提示特效
Dec 10 #Javascript
jQuery实现选项卡切换效果简单演示
Dec 09 #Javascript
jquery特效 点击展示与隐藏全文
Dec 09 #Javascript
AngularJS实现表单手动验证和表单自动验证
Dec 09 #Javascript
js实现微信分享代码
Oct 11 #Javascript
JavaScript观察者模式(经典)
Dec 09 #Javascript
You might like
php项目打包方法
2008/02/18 PHP
php htmlspecialchars加强版
2010/02/16 PHP
php设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
PHP备份数据库生成SQL文件并下载的函数代码
2012/02/05 PHP
PHP If Else(elsefi) 语句
2013/04/07 PHP
CI框架中通过hook的方式实现简单的权限控制
2015/01/07 PHP
artDialog双击会关闭对话框的修改过程分享
2013/08/05 Javascript
javascript操作字符串的原生方法
2014/12/22 Javascript
jQuery中animate用法实例分析
2015/03/09 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
2016/10/05 Javascript
基于 webpack2 实现的多入口项目脚手架详解
2017/06/26 Javascript
JavaScript实现时间表动态效果
2017/07/15 Javascript
JS 使用 window对象的print方法实现分页打印功能
2018/05/16 Javascript
vue强制刷新组件的方法示例
2019/02/28 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
vue实现列表拖拽排序的功能
2020/11/02 Javascript
javascript this指向相关问题及改变方法
2020/11/19 Javascript
总结Python编程中函数的使用要点
2016/03/20 Python
Python通过Django实现用户注册和邮箱验证功能代码
2017/12/11 Python
Python加载带有注释的Json文件实例
2018/05/23 Python
python 借助numpy保存数据为csv格式的实现方法
2018/07/04 Python
基于Python实现拆分和合并GIF动态图
2019/10/22 Python
Python字符编码转码之GBK,UTF8互转
2020/02/09 Python
python collections模块的使用
2020/10/16 Python
CSS3实现可关闭的下拉手风琴菜单效果
2015/08/31 HTML / CSS
Zipadee-Zip襁褓过渡毯:Sleeping Baby
2018/12/30 全球购物
一些网络技术方面的面试题
2014/05/01 面试题
初中优秀班集体申报材料
2014/05/01 职场文书
婚前协议书范本
2014/10/27 职场文书
优秀志愿者感言
2015/08/01 职场文书
遗嘱范文
2015/08/07 职场文书
感恩教师节主题班会
2015/08/12 职场文书
深入浅析Redis 集群伸缩原理
2021/05/15 Redis
教你怎么用python爬取爱奇艺热门电影
2021/05/20 Python
一次项目中Thinkphp绕过禁用函数的实战记录
2021/11/17 PHP
JavaScript中document.activeELement焦点元素介绍
2021/11/27 Javascript