编程 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 相关文章推荐

一种JavaScript的设计模式

Nov 22 Javascript

Js 获取HTML DOM节点元素的方法小结

Apr 24 Javascript

JS代码放在head和body中的区别分析

Dec 01 Javascript

Javascript 判断是否存在函数的方法

Jan 03 Javascript

jQuery实现的Div窗口震动特效

Jun 09 Javascript

Jquery中使用show()与hide()方法动画显示和隐藏图片

Oct 08 Javascript

node.js与C语言实现遍历文件夹下最大的文件，并输出路径，大小

Jan 20 Javascript

微信小程序-获得用户输入内容

Feb 13 Javascript

angularJs中orderBy筛选以及filter过滤数据的方法

Sep 30 Javascript

详解如何为你的angular app构建一个第三方库

Dec 07 Javascript

解决layui的使用以及针对select、radio等表单组件不显示的问题

Sep 05 Javascript

js DOM的事件常见操作实例详解

Dec 16 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