Teknologian jakaminen

html css js satunnainen vahvistuskoodi

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Piirrä satunnaisia ​​merkkejä ja viivoja Lähdekoodi on kuvan takana.

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

Kuva

ec6bfd2cf73f424bb35056649a0bca69.jpg

 lähdekoodi

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Captcha-vahvistus</title>
    <style>
body {
näyttö: flex;
perustele-sisältö: keskus;
kohdista kohteet: keskellä;
min-korkeus: 100vh;
taustaväri: #f0f0f0;
marginaali: 0;
        }

.captcha-container {
taustaväri: valkoinen;
reunan säde: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0,1);
täyte: 20px;
näyttö: flex;
flex-suunta: pylväs;
kohdista kohteet: keskellä;
leveys: 400 pikseliä;
        }

.captcha-board {
leveys: 100 %;
korkeus: 150px;
tausta: #eee;
reunan säde: 5px;
asema: suhteellinen;
ylivuoto piilotettu;
        }

.captcha-input {
leveys: 100 %;
korkeus: 40px;
marginaali yläreuna: 20px;
täyte: 0 10px;
reuna: 1px kiinteä #ccc;
reunan säde: 5px;
        }

.captcha-button {
leveys: 100 %;
korkeus: 40px;
taustaväri: oranssi;
väri valkoinen;
reuna: ei mitään;
reunan säde: 5px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0,1);
kohdistin: osoitin;
marginaali yläreuna: 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()">Vahvista</button>
    </div>

    <script>
function generateCaptcha() {
let chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
anna captchaText = '';
for (olkoon i = 0; i &lt; 4; i++) {
captchaText += merkkiä[Math.floor(Math.random() * chars.length)];
            }
document.getElementById('captchaBoard').innerHTML = `<h1 style="font-size: 60px;"> ${captchaText}</h1> `;
piirrä RandomLines();
palauttaa captchaText;
        }

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

for (olkoon i = 0; i &lt; 10; i++) {
let line = document.createElementNS("http://www.w3.org/2000/svg", "rivi");
anna väri = `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("viiva", väri);
line.setAttribute("viiva-leveys", 1);
svg.appendChild(line);
            }
board.appendChild(svg);
        }

anna captcha = generoidaCaptcha();

function verifyCaptcha() {
anna input = document.getElementById('captchaInput').arvo;
if (syöttö === captcha) {
alert('Vahvistus läpäissyt!');
} muu {
alert('Väärä captcha!');
            }
        }
    </script>
</body>
</html>

henkilökohtainen profiili

Hän on omistautunut teknologian tutkimukselle yli 30 vuoden ajan ja hallitsee useita kieliä, kuten java, linux, javascript, php, css jne. Hän on tehnyt paljon työtä avoimen lähdekoodin tässä Kehittäjän dokumentaatioasema, jossa voit ja teknologian kehittämisen ongelman myöhempää käyttöä varten

yhteystietoni

Mail