2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
Zeichnen Sie zufällige Zeichen und Linien. Der Quellcode befindet sich hinter dem Bild.
点赞❤️+关注😍+收藏⭐️ 互粉必回
Illustration
Quellcode
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Captcha-Verifizierung</title>
<style>
Körper {
Anzeige: Flex;
Inhalt ausrichten: zentriert;
Elemente ausrichten: zentrieren;
Mindesthöhe: 100vh;
Hintergrundfarbe: #f0f0f0;
Rand: 0;
}
.captcha-container {
Hintergrundfarbe: weiß;
Rahmenradius: 10px;
Kastenschatten: 0 4px 6px rgba (0, 0, 0, 0,1);
Polsterung: 20px;
Anzeige: Flex;
Flex-Richtung: Spalte;
Elemente ausrichten: zentrieren;
Breite: 400px;
}
.captcha-board {
Breite: 100 %;
Höhe: 150px;
Hintergrund: #eee;
Rahmenradius: 5px;
Position: relativ;
Überlauf versteckt;
}
.captcha-eingabe {
Breite: 100 %;
Höhe: 40px;
Rand oben: 20px;
Polsterung: 0 10px;
Rand: 1px durchgezogen #ccc;
Rahmenradius: 5px;
}
.captcha-button {
Breite: 100 %;
Höhe: 40px;
Hintergrundfarbe: orange;
Farbe weiß;
Rand: keiner;
Rahmenradius: 5px;
Kastenschatten: 0 4px 6px rgba (0, 0, 0, 0,1);
Cursor: Zeiger;
Rand oben: 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()">Verifizieren</button>
</div>
<script>
Funktion generateCaptcha() {
let chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
let captchaText = '';
für (sei i = 0; i < 4; i++) {
captchaText += Zeichen[Math.floor(Math.random() * Zeichen.Länge)];
}
document.getElementById('captchaBoard').innerHTML = `<h1 style="font-size: 60px;"> ${captchaText}</h1> `;
zeichneZufallslinien();
CaptchaText zurückgeben;
}
Funktion zeichneZufallslinien() {
let board = document.getElementById('captchaBoard');
let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("Breite", "100%");
svg.setAttribute("Höhe", "100%");
svg.style.position = "absolut";
svg.style.top = "0";
svg.style.left = "0";
für (sei i = 0; i < 10; i++) {
let Zeile = document.createElementNS("http://www.w3.org/2000/svg", "Zeile");
lass Farbe = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`;
Zeile.SetzeAttribute("x1", Math.random() * 100 + "%");
Zeile.SetzeAttribute("y1", Math.random() * 100 + "%");
Zeile.SetzeAttribute("x2", Math.random() * 100 + "%");
Zeile.SetzeAttribute("y2", Math.random() * 100 + "%");
Linie.setAttribute("Strich", Farbe);
line.setAttribute("Strichbreite", 1);
svg.appendChild(Zeile);
}
board.appendChild(svg);
}
let captcha = generateCaptcha();
Funktion „verifyCaptcha()“ {
let input = document.getElementById('captchaInput').value;
wenn (Eingabe === Captcha) {
alert('Überprüfung erfolgreich!');
} anders {
alert('Falsches Captcha!');
}
}
</script>
</body>
</html>
Er widmet sich seit mehr als 30 Jahren der Technologieforschung und beherrscht verschiedene Sprachen wie Java, Linux, Javascript, PHP, CSS usw. Er hat viele Beiträge im Open-Source-Bereich geleistet Entwicklerdokumentationsstation, um einige Themen in der Technologieentwicklung als zukünftige Referenz zu teilen
