기본 js_javascript 기술로 혼합 영숫자 확인 코드를 구현하는 간단한 예-JS 튜토리얼-php.cn

기본 js_javascript 기술로 혼합 영숫자 확인 코드를 구현하는 간단한 예

WBOY

풀어 주다： 2016-05-16 15:26:44

원래의

2698명이 탐색했습니다.

이 기사의 예는 기본 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>

로그인 후 복사