html+css+js随机验证码

睿智的海鸥

于 2024-07-08 17:11:44 发布

阅读量1k

点赞数 20

本文链接：https://blog.csdn.net/w11111xxxl/article/details/140273914

版权

随机画入字符、线条源代码在图片后面

点赞❤️+关注😍+收藏⭐️ 互粉必回

图示

源代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Captcha Verification</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
margin: 0;
}

.captcha-container {
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
width: 400px;
}

.captcha-board {
width: 100%;
height: 150px;
background: #eee;
border-radius: 5px;
position: relative;
overflow: hidden;
}

.captcha-input {
width: 100%;
height: 40px;
margin-top: 20px;
padding: 0 10px;
border: 1px solid #ccc;
border-radius: 5px;
}

.captcha-button {
width: 100%;
height: 40px;
background-color: orange;
color: white;
border: none;
border-radius: 5px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
cursor: pointer;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="captcha-container">
<div class="captcha-board" id="captchaBoard"></div>
<input type="text" class="captcha-input" placeholder="Enter the captcha" id="captchaInput">
<button class="captcha-button" οnclick="verifyCaptcha()">Verify</button>
</div>

function drawRandomLines() {
let board = document.getElementById('captchaBoard');
let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", "100%");
svg.setAttribute("height", "100%");
svg.style.position = "absolute";
svg.style.top = "0";
svg.style.left = "0";

for (let i = 0; i < 10; i++) {
let line = document.createElementNS("http://www.w3.org/2000/svg", "line");
let color = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`;
line.setAttribute("x1", Math.random() * 100 + "%");
line.setAttribute("y1", Math.random() * 100 + "%");
line.setAttribute("x2", Math.random() * 100 + "%");
line.setAttribute("y2", Math.random() * 100 + "%");
line.setAttribute("stroke", color);
line.setAttribute("stroke-width", 1);
svg.appendChild(line);
}
board.appendChild(svg);
}

let captcha = generateCaptcha();