Compartilhamento de tecnologia

código de verificação aleatório html css js

2024-07-12

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

Desenhe caracteres e linhas aleatórios. O código-fonte está atrás da imagem.

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

Ilustração

ec6bfd2cf73f424bb35056649a0bca69.jpg

 Código fonte

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Verificação de CAPTCHA</title>
    <style>
corpo {
exibição: flexível;
justificar-conteúdo: centro;
alinhar-itens: centralizar;
altura mínima: 100vh;
cor de fundo: #f0f0f0;
margem: 0;
        }

.captcha-container {
cor de fundo: branco;
raio da borda: 10px;
caixa-sombra: 0 4px 6px rgba(0, 0, 0, 0.1);
preenchimento: 20px;
exibição: flexível;
flex-direction: coluna;
alinhar-itens: centralizar;
largura: 400px;
        }

.quadro-captcha {
largura: 100%;
altura: 150px;
fundo: #eee;
raio da borda: 5px;
posição: relativa;
estouro: oculto;
        }

.entrada-captcha {
largura: 100%;
altura: 40px;
margem superior: 20px;
preenchimento: 0 10px;
borda: 1px sólido #ccc;
raio da borda: 5px;
        }

.botão-captcha {
largura: 100%;
altura: 40px;
cor de fundo: laranja;
cor branca;
borda: nenhuma;
raio da borda: 5px;
caixa-sombra: 0 4px 6px rgba(0, 0, 0, 0.1);
cursor: ponteiro;
margem superior: 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()">Verificar</button>
    </div>

    <script>
função generateCaptcha() {
deixe caracteres = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
deixe captchaText = '';
para (seja i = 0; i &lt; 4; i++) {
captchaText += caracteres[Math.floor(Math.random() * caracteres.length)];
            }
documento.getElementById('captchaBoard').innerHTML = `<h1 style="font-size: 60px;"> ${textocaptcha}</h1> `;
desenharLinhasAleatórias();
retornar captchaText;
        }

função drawRandomLines() {
deixe quadro = document.getElementById('captchaBoard');
deixe svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("largura", "100%");
svg.setAttribute("altura", "100%");
svg.style.position = "absoluto";
svg.style.top = "0";
svg.style.esquerda = "0";

para (seja i = 0; i &lt; 10; i++) {
deixe linha = document.createElementNS("http://www.w3.org/2000/svg", "linha");
deixe cor = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`;
linha.setAttribute("x1", Math.random() * 100 + "%");
linha.setAttribute("y1", Math.random() * 100 + "%");
linha.setAttribute("x2", Math.random() * 100 + "%");
linha.setAttribute("y2", Math.random() * 100 + "%");
line.setAttribute("traço", cor);
line.setAttribute("largura do traço", 1);
svg.appendChild(linha);
            }
quadro.appendChild(svg);
        }

deixe captcha = generateCaptcha();

função verifyCaptcha() {
deixe entrada = document.getElementById('captchaInput').value;
se (entrada === captcha) {
alert('Verificação aprovada!');
} outro {
alert('Captcha incorreto!');
            }
        }
    </script>
</body>
</html>

Perfil pessoal

Ele se dedica à pesquisa de tecnologia há mais de 30 anos e é proficiente em diversas linguagens como java, linux, javascript, php, css, etc. estação de documentação do desenvolvedor para compartilhar alguns problemas no desenvolvimento de tecnologia para referência futura.

minhas informações de contato

Correspondência