上代码
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>验证码</title>
<link rel="stylesheet" href="./CSS/index.css">
</head>
<body>
<form action="#">
<input type="text">
<svg></svg>
<span>看不清,换一张</span>
<input type="button" value="点我" name="inputStr">
</form>
<script src="../../../tools.js"></script>
<script src="./JS/index.js"></script>
</body>
</html>
CSS
form {
vertical-align: center;
}
svg {
width: 150px;
height: 40px;
border: 1px solid black;
vertical-align: bottom;
}
input {
width: 80px;
height: 40px;
}
JS
//获取各种节点
let svgEle = document.getElementsByTagName("svg")[0];
let offsetWidth = parseInt(getNodeStyle(svgEle).width);
let offsetHeight = parseInt(getNodeStyle(svgEle).height);
let words = "1234567890abcdefghijklmnopqrstuvwxyz";
let str = "";
let num = "";
function createLine(num) {
for (let i = 1; i <= num; i++) {
str += `<line x1="${getNum(offsetWidth)}" y1="${getNum(offsetHeight)}" x2="${getNum(offsetWidth)}" y2="${getNum(offsetHeight)}" stroke="rgba(${getNum(255)},${getNum(255)},${getNum(255)},.7)"> </line>`
}
}
function createWords() {
return words[getNum(35)];
}
function createText(num) {
let temp = "";
for (let i = 1; i <= num; i++) {
str += `<text x="${25*i}" y="30" rotate="${getNum(-30,30)}" fill="rgba(${getNum(255)},${getNum(255)},${getNum(255)})">`;
let word = createWords();
temp += word;
str += i % 2 == getNum(0, 1) && isNaN(word) ?
`${word.toUpperCase()}` : word;
str += `</text>`;
}
return temp;
}
let spanEle = document.getElementsByTagName("span")[0];
spanEle.addEventListener("click", main);
function main() {
str = "";
createLine(7);
//获取生成的文本
num = createText(4);
svgEle.innerHTML = str;
}
main();
//验证是否正确
let inpEle = document.getElementsByTagName("input");
inpEle[1].addEventListener("click", function(e) {
if (inpEle[0].value == num) {
alert("验证成功!!!");
} else {
alert("验证失败!!!");
inpEle[0].value = "";
}
})