编程 Javascript

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

Posted in Javascript onDecember 10, 2015

本文实例讲述了原生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>

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

- Author -

乐观地摸摸头

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS模板实现方法

Apr 03 Javascript

jQuery操作DOM_动力节点Java学院整理

Jul 04 jQuery

jQuery.Ajax()的data参数类型详解

Jul 23 jQuery

深入理解React Native原生模块与JS模块通信的几种方式

Jul 24 Javascript

使用jQuery实现页面定时弹出广告效果

Aug 24 jQuery

webpack3之loader全解析

Oct 26 Javascript

vue实现树形菜单效果

Mar 19 Javascript

浅谈vue项目可以从哪些方面进行优化

May 05 Javascript

React中this丢失的四种解决方法

Mar 12 Javascript

webpack打包优化的几个方法总结

Feb 10 Javascript

element-ui 实现响应式导航栏的示例代码

May 08 Javascript

基于aotu.js实现微信自动添加通讯录中的联系人功能

May 28 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