Обмен технологиями

html css js случайный код проверки

2024-07-12

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

Нарисуйте случайные символы и линии. За картинкой находится исходный код.

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

Иллюстрация

ec6bfd2cf73f424bb35056649a0bca69.jpg

 исходный код

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Проверка капчи</title>
    <style>
тело {
дисплей: гибкий;
выравнивание по содержимому: по центру;
выравнивание элементов: по центру;
мин. высота: 100vh;
цвет фона: #f0f0f0;
поле: 0;
        }

.captcha-контейнер {
цвет фона: белый;
радиус рамки: 10 пикселей;
тень-блока: 0 4px 6px rgba(0, 0, 0, 0.1);
отступ: 20px;
дисплей: гибкий;
направление изгиба: столбец;
выравнивание элементов: по центру;
ширина: 400 пикселей;
        }

.captcha-доска {
ширина: 100%;
высота: 150 пикселей;
фон: #eee;
радиус закругления: 5 пикселей;
положение: относительное;
переполнение: скрыто;
        }

.captcha-ввод {
ширина: 100%;
высота: 40 пикселей;
верхнее поле: 20px;
отступ: 0 10px;
граница: 1 пиксель сплошная #ccc;
радиус закругления: 5 пикселей;
        }

.captcha-кнопка {
ширина: 100%;
высота: 40 пикселей;
цвет фона: оранжевый;
белый цвет;
граница: нет;
радиус закругления: 5 пикселей;
тень-блока: 0 4px 6px rgba(0, 0, 0, 0.1);
курсор: указатель;
верхнее поле: 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()">Проверять</button>
    </div>

    <script>
функция generateCaptcha() {
пусть символы = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
пусть captchaText = '';
для (пусть i = 0; i &lt; 4; i++) {
captchaText += chars[Math.floor(Math.random() * chars.length)];
            }
document.getElementById('captchaBoard').innerHTML = `<h1 style="font-size: 60px;"> ${captchaText}</h1> `;
drawRandomLines();
вернуть captchaText;
        }

функция drawRandomLines() {
пусть доска = document.getElementById('captchaBoard');
пусть svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("ширина", "100%");
svg.setAttribute("высота", "100%");
svg.style.position = "абсолютный";
svg.style.top = "0";
svg.style.left = "0";

для (пусть i = 0; i &lt; 10; i++) {
пусть строка = document.createElementNS("http://www.w3.org/2000/svg", "строка");
пусть цвет = `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 + "%");
строка.setAttribute("x2", Math.random() * 100 + "%");
line.setAttribute("y2", Math.random() * 100 + "%");
line.setAttribute("обводка", цвет);
line.setAttribute("ширина-штриха", 1);
svg.appendChild(строка);
            }
board.appendChild(svg);
        }

пусть капча = generateCaptcha();

функция verifyCaptcha() {
пусть ввод = документ.getElementById('captchaInput').value;
если (ввод === капча) {
alert('Проверка пройдена!');
} еще {
alert('Неверная капча!');
            }
        }
    </script>
</body>
</html>

Личный профиль

Он посвятил себя исследованию технологий более 30 лет и владеет различными языками, такими как Java, Linux, Javascript, php, css и т. д. Он внес большой вклад в область открытого исходного кода. Станция документации для разработчиков, где можно поделиться некоторыми проблемами в разработке технологий для дальнейшего использования. Все ознакомьтесь.

моя контактная информация

Почта