AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

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

51自学网 http://www.wanshiok.com
js数字字母验证码,js验证码,js混合验证码,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>


js数字字母验证码,js验证码,js混合验证码,js数字字母混合验证码  
上一篇:解决angular的$http.post()提交数据时后台接收不到参数值问题的方法  下一篇:js实现新年倒计时效果