小编给大家分享一下JavaScript如何实现验证码功能的方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
JavaScript实现简单验证码，具体内容如下
验证流程图
HTML部分
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.code {
font-family: Arial;
font-style: italic;
color: blue;
font-size: 26px;
border: 0;
padding: 0.2px 1.2px;
letter-spacing: 4px;
font-weight: bolder;
float: left;
cursor: pointer;
width: 120px;
height: 40px;
line-height: 40px;
text-align: center;
vertical-align: middle;
background-color: #d8b7e3;
}
span {
text-decoration: none;
font-size: 12px;
color: #288bc4;
padding-left: 10px;
/* color: #4c9b7675; */
}
span:hover {
text-decoration: underline;
cursor: pointer;
/* color: rgb(rgb(221, 84, 84), green, blue); */
/* color: rgb(rgb(160, 207, 209), green, blue); */
}
</style>
<body>
<div>
<table border="0" cellspacing="5" cellpadding="5">
<tr>
<td>
<div id="checkCode" class="code" onclick="createCode(4)">543</div>
</td>
<td> <span onclick="createCode(4)">看不清换一张</span></td>
</tr>
<tr>
<td>验证码：</td>
<td><input type="text" id="inputCode" /></td>
</tr>
<tr>
<td></td>
<td><input type="button" onclick="validateCode()" value="确定" /></td>
</tr>
</table>
</div>JavaScript部分
window.onload = function () {
createCode(4);
}
// 创建验证码
function createCode(len) {
//
var code = '';
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 color = '#';
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 < codeLength; i++) {
//获取数组下标
var charNum = Math.floor(Math.random() * 62);
// 存储数组
code = code + codeArray[charNum];
}
if (checkCode && code.length == codeLength) {
checkCode.innerHTML = code;
}
// 设置验证码颜色
for (var i = 0; i < 6; i++) {
var colorNum = Math.floor(Math.random() * 15);
color += fontcolor[colorNum];
}
console.log(color)
checkCode.style.color = color;
// 设置画布背景颜色
for (var i = 0; i < 6; i++) {
var colorNum = Math.floor(Math.random() * 15);
bgcolor += fontcolor[colorNum];
}
checkCode.style.backgroundColor = bgcolor;
}
// 检验验证码是否正确
function validateCode() {
// 获取画布的验证码
var checkCode = document.getElementById("checkCode").innerHTML;
// 获取用户输入的验证码，并且去掉空格
var inputCode = document.getElementById('inputCode').value.trim();
console.log(checkCode)
console.log(inputCode)
// 判断是否相等
if (inputCode.length < 4) {
alert('验证码长度为四位');
createCode(4);
} else if (checkCode.toLocaleLowerCase() != inputCode.toLocaleLowerCase()) {
alert('输入验证码不正确！');
createCode(4);
} else {
alert('正确')
}
}以上是JavaScript如何实现验证码功能的方法的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
