Compartir tecnología

código de verificación aleatorio html css js

2024-07-12

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

Dibuja caracteres y líneas aleatorios. El código fuente está detrás de la imagen.

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

Ilustración

ec6bfd2cf73f424bb35056649a0bca69.jpg

 código fuente

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Verificacion CAPTCHA</title>
    <style>
cuerpo {
pantalla:flexible;
justificar-contenido: centro;
alinear-elementos: centro;
altura mínima: 100vh;
color de fondo: #f0f0f0;
margen: 0;
        }

.contenedor captcha {
color de fondo: blanco;
radio del borde: 10px;
caja-sombra: 0 4px 6px rgba(0, 0, 0, 0.1);
relleno: 20px;
pantalla:flexible;
flex-direccion: columna;
alinear-elementos: centro;
ancho: 400px;
        }

tablero .captcha {
ancho: 100%;
altura: 150px;
fondo: #eee;
radio del borde: 5px;
posición: relativa;
desbordamiento: oculto;
        }

.captcha-entrada {
ancho: 100%;
altura: 40px;
margen superior: 20px;
relleno: 0 10px;
borde: 1px sólido #ccc;
radio del borde: 5px;
        }

botón .captcha {
ancho: 100%;
altura: 40px;
color de fondo: naranja;
color blanco;
borde: ninguno;
radio del borde: 5px;
caja-sombra: 0 4px 6px rgba(0, 0, 0, 0.1);
cursor: puntero;
margen 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>
función generateCaptcha() {
deje caracteres = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
deje captchaText = '';
para (sea i = 0; i &lt; 4; i++) {
captchaText += caracteres[Math.floor(Math.random() * caracteres.length)];
            }
documento.getElementById('captchaBoard').innerHTML = `<h1 style="font-size: 60px;"> ${captchaText}</h1> `;
dibujarLíneasAleatorias();
devolver captchaText;
        }

función drawRandomLines() {
deje que el tablero = document.getElementById('captchaBoard');
deje svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("ancho", "100%");
svg.setAttribute("altura", "100%");
svg.style.position = "absoluto";
svg.style.top = "0";
svg.style.left = "0";

para (sea i = 0; i &lt; 10; i++) {
deje que la línea = document.createElementNS("http://www.w3.org/2000/svg", "línea");
deje que el color = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`;
línea.setAttribute("x1", Math.random() * 100 + "%");
línea.setAttribute("y1", Math.random() * 100 + "%");
línea.setAttribute("x2", Math.random() * 100 + "%");
línea.setAttribute("y2", Math.random() * 100 + "%");
línea.setAttribute("trazo", color);
línea.setAttribute("ancho-del-trazo", 1);
svg.appendChild(línea);
            }
tablero.appendChild(svg);
        }

deje que captcha = generateCaptcha();

función verificarCaptcha() {
deje que la entrada sea = document.getElementById('captchaInput').value;
si (entrada === captcha) {
alert('¡Verificación aprobada!');
} demás {
alert('¡Captcha incorrecto!');
            }
        }
    </script>
</body>
</html>

Perfil personal

Se ha dedicado a la investigación de tecnología durante más de 30 años y domina varios lenguajes como java, linux, javascript, php, css, etc. Ha realizado muchas contribuciones en el campo del código abierto. Estación de documentación para desarrolladores para compartir algunos problemas en el desarrollo de tecnología para referencia futura.

Mi informacion de contacto

Correo