JavaScript实现简单验证码,供大家参考,具体内容如下
验证流程图
HTML部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
```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" style = "float:left;" /></ td >
</ tr >
< tr >
< td ></ td >
< td >< input type = "button" onclick = "validateCode()" value = "确定" /></ td >
</ tr >
</ table >
</ div >
|
JavaScript部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
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( '正确' )
}
}
|
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。
原文链接:https://blog.csdn.net/qq_44659826/article/details/107976787