js验证码

html+css+js实现的验证码

js验证码

HTML

<div class="codediv">
  <div class="code" id="codes" onclick="createCode();"></div>
  <input name="code" type="text" maxlength="4" class="code-input" required placeholder="请输入验证码">
</div>

CSS

/* 我的css */
.codediv{
  display:flex;
  flex-direction: row;
  justify-content: flex-start;
  margin-right: 5px;
}

.code {
  margin-right: 3px;
  background: url(code_bg.png);//图片地址：https://a.biugle.cn/setcodes/code_bg.png
  font-family: Arial;
  font-style: italic;
  color: white;
  font-size: 17px;
  border: 0;
  border-radius: 5px;
  padding: 1px 3px 1px 5px;
  letter-spacing: 6px;
  font-weight: bolder;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  cursor: pointer;
  width: 70px;
  height: 21px;
  line-height: 21px;
  text-align: center;
  vertical-align: middle;
}

.code-input{
  color: #4876ff;
  border: 1px solid #777;
  box-sizing: border-box;
  padding-left: 5px;
  padding-right: 5px;
  line-height: 15px;
  font-size: 15px;
  width: 121px;
  border-radius: 5px;
  outline: none;
}

JS

/**
 * 生成验证码，CSS样式自行设计。
 */
var code;
function createCode() {
  code = "";
  var codeLength = 4;//验证码的长度
  var checkCode = document.querySelector("#codes");
  var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '贺');//所有候选组成验证码的字符，可以用中文。
  for (var i = 0; i < codeLength; i++) {
    var charNum = Math.floor(Math.random() * 52);
    code += codeChars[charNum];
  }
  if (checkCode) {
    checkCode.className = "code";
    checkCode.innerHTML = code;
  }
}
/* 记得先将输入的内容全转为大写或者小写，再进行验证。 */