js 实现验证码

实现逻辑：

1、生成验证码
        总共6位数  范围：0-9  a-f 随机生成
        从0-9 、 a-f获取随机下标
2、 页面加载时，生成一次
    点击看不清换一张时，生成一次
    将生成的验证码与输入的验证码进行验证比对 

<style type="text/css">
    .code {
      height: 50px;
    }

    .code span {
      float: left;
      background: #cecece;
      line-height: 50px;
      height: 50px;
      width: 120px;
      text-align: center;
    }

    .code a {
      text-decoration: none;
      float: left;
      line-height: 50px;
      margin-left: 20px;
    }
  </style>



  <div class="box">
    <div class="code">
      <span id="check">23232</span>
      <a href="#" id="toggle">看不清换一张</a>
    </div>

  </div>
  <div class="input">
    <label for="ipt">验证码：</label>
    <input type="text" id="ipt" />
  </div>
  <button id="btn">确定</button>

  <script type="text/javascript">
    var code = document.getElementById("check");
    var ipt = document.getElementById("ipt");
    var toggle = document.getElementById("toggle");
    var btn = document.getElementById("btn");

    function getCode() {
      var arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "e", 'f'];
      var str = "";
      for (let i = 0; i < 6; i++) {
        str += arr[Math.floor(Math.random() * arr.length)];
      }
      return str;
    }
    code.innerText = getCode();
    toggle.onclick = function () {
      code.innerText = getCode();
    }
    btn.onclick = function () {
      var code = document.getElementById("check").innerText;
      var checkcode = ipt.value;
      if (code != checkcode) {
        ipt.value = "";
        alert("验证码输入错误！");
        return;
      }
      alert("验证通过！")
    }
  </script>