JavaScript实现简单的验证码

JavaScript实现简单的验证码供大家参考。具体内容如下

验证流程图

HTML 部分

```javascript




  
  
  




  
    

      

        

          第543章
        
        
 看不清，换一张
      
      

        
验证码：
        

      
      

        

        

      
    

JavaScript部分

window.onload = 函数() {
      创建代码(4);
    }


    //创建验证码
    函数创建代码（len）{
      //
      变量代码 = '';
      var codeLength = parseInt(len); //验证码长度
      var checkCode = document.getElementById('checkCode'); //获取画布
      //设置验证码
      var codeArray = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'z', 'x', 'c', 'v', 'b', 'n', 'm'、'l'、'k'、'j'、'h'、'g'、'f'、'd'、's'、'a'、'p'、'o'、'i '、'u'、'y'、't'、'r'、'r'、'e'、'w'、'q'、'Z'、'X'、'C'、'V ”、“B”、“N”、“M”、“A”、“S”、“D”、“F”、“G”、“H”、“J”、“L”、“K”、 “P”、“O”、“I”、“U”、“Y”、“T”、“R”、“E”、“W”、“Q”）

      //设置验证码颜色
      // var num= Math.floor(Math.random() * 8)
      var 颜色 = '#';
      var bgcolor = '#';var fontcolor = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', ​​'f') ;

      // 循环数组并随机获取
      for (var i = 0; i < 代码长度; i++) {
        //获取数组下标
        var charNum = Math.floor(Math.random() * 62);
        // 存储数组
        代码 = 代码 + codeArray[charNum];
      }
      if (checkCode && code.length == codeLength) {
        checkCode.innerHTML = 代码；
      }

      //设置验证码颜色
      for (var i = 0; i < 6; i++) {
        var colorNum = Math.floor(Math.random() * 15);
        颜色+=字体颜色[colorNum];
      }
      控制台.log(颜色)
      checkCode.style.color = 颜色;
      
      //设置画布背景颜色
      for (var i = 0; i < 6; i++) {
        var colorNum = Math.floor(Math.random() * 15);
        bgcolor += 字体颜色[colorNum];
      }
      checkCode.style.backgroundColor = bgcolor;

    }

    // 检查验证码是否正确
    函数验证代码（）{
      // 获取canvas的验证码
      var checkCode = document.getElementById("checkCode").innerHTML;// 获取用户输入的验证码并去掉空格
      var inputCode = document.getElementById('inputCode').value.trim();

      控制台.log(检查代码)
      控制台.log(输入代码)

      // 判断是否相等
      if (inputCode.length < 4) {
        alert('验证码长度为四位');
        创建代码(4);
      } else if (checkCode.toLocaleLowerCase() != inputCode.toLocaleLowerCase()) {
        alert('输入的验证码不正确！');
        创建代码(4);
      } 别的 {
        警报（'正确'）
      }
}