原生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 相关文章推荐
jQuery 加上最后自己的验证
Nov 04 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
Nov 14 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
Aug 25 Javascript
node.js回调函数之阻塞调用与非阻塞调用
Nov 13 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
完美解决linux下node.js全局模块找不到的情况
May 16 Javascript
vue v-model实现自定义样式多选与单选功能
Jul 05 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
Sep 25 Javascript
vue-router之nuxt动态路由设置的两种方法小结
Sep 26 Javascript
Vue 动态添加路由及生成菜单的方法示例
Jun 20 Javascript
让Vue响应Map或Set的变化操作
Nov 11 Javascript
vue实现防抖的实例代码
Jan 11 Vue.js
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
全国FM电台频率大全 - 19 广东省
2020/03/11 无线电
php 模拟POST提交的2种方法详解
2013/06/17 PHP
PHP JSON出错:Cannot use object of type stdClass as array解决方法
2014/08/16 PHP
jQuery 操作option的实现代码
2011/03/03 Javascript
js函数返回多个返回值的示例代码
2013/11/05 Javascript
JsRender实用入门教程
2014/10/31 Javascript
javascript 原型链维护和继承详解
2014/11/26 Javascript
jquery实现模拟百分比进度条渐变效果代码
2015/10/29 Javascript
详解jQuery停止动画——stop()方法的使用
2016/12/14 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
2018/08/31 Javascript
深入浅析Vue 中 ref 的使用
2019/04/29 Javascript
layui使用数据表格实现购物车功能
2019/07/26 Javascript
JavaScript canvas基于数组生成柱状图代码实例
2020/03/06 Javascript
Python简单计算文件夹大小的方法
2015/07/14 Python
python获取元素在数组中索引号的方法
2015/07/15 Python
Python 字符串大小写转换的简单实例
2017/01/21 Python
Python(Django)项目与Apache的管理交互的方法
2018/05/16 Python
Python全排列操作实例分析
2018/07/24 Python
Python连接Mssql基础教程之Python库pymssql
2018/09/16 Python
python 阶乘累加和的实例
2019/02/01 Python
python做反被爬保护的方法
2019/07/01 Python
Python+selenium点击网页上指定坐标的实例
2019/07/05 Python
Python高级特性之闭包与装饰器实例详解
2019/11/19 Python
python自动化办公操作PPT的实现
2021/02/05 Python
css3制作彩色边线3d立体按钮的示例(css3按钮)
2014/05/06 HTML / CSS
Everything But Water官网:美国泳装品牌
2019/03/17 全球购物
英国奢侈品牌时尚购物平台:Farfetch(支持中文)
2020/02/18 全球购物
超市开学活动方案
2014/03/01 职场文书
2014乡镇党政班子四风问题思想汇报
2014/09/14 职场文书
事业单位个人总结
2015/02/12 职场文书
2015年行政人事部工作总结
2015/05/13 职场文书
《惊弓之鸟》教学反思
2016/02/20 职场文书
全家福照片寄语怎么写?
2019/04/02 职场文书
经典励志格言:每日一句,让你每天充满能量
2019/08/16 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript