html+css+js随机验证码

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

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

图示

源代码

<!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>

<script>

function generateCaptcha() {

let chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

let captchaText = '';

for (let i = 0; i < 4; i++) {

captchaText += charsMath.floor(Math.random() \* chars.length);

}

document.getElementById('captchaBoard').innerHTML = `<h1 style="font-size: 60px;">${captchaText}</h1>`;

drawRandomLines();

return captchaText;

}

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();

function verifyCaptcha() {

let input = document.getElementById('captchaInput').value;

if (input === captcha) {

alert('Verification Passed!');

} else {

alert('Incorrect Captcha!');

}

}

</script>

</body>

</html>