技術共有

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コンテナ{
背景色: 白;
境界線の半径: 10px;
ボックスの影: 0 4px 6px rgba(0, 0, 0, 0.1);
パディング: 20px;
ディスプレイ: フレックス;
flex-direction: 列;
アイテムの位置を中央揃えにします。
幅: 400ピクセル;
        }

.captcha-board {
幅: 100%;
高さ: 150px;
背景: #eee;
境界線の半径: 5px;
位置: 相対的;
オーバーフロー: 非表示;
        }

.captcha入力{
幅: 100%;
高さ: 40px;
上マージン: 20px;
パディング: 0 10px;
境界線: 1px 実線 #ccc;
境界線の半径: 5px;
        }

.captcha-button {
幅: 100%;
高さ: 40px;
背景色: オレンジ;
色: 白;
境界線: なし;
境界線の半径: 5px;
ボックスの影: 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() {
chars = '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;"> ${キャプチャテキスト}</h1> `;
ランダムラインを描画します。
captchaTextを返します。
        }

関数drawRandomLines() {
board を document.getElementById('captchaBoard') に設定します。
svg を document.createElementNS("http://www.w3.org/2000/svg", "svg") とします。
svg.setAttribute("幅", "100%");
svg.setAttribute("高さ", "100%");
svg.style.position = "絶対";
スタイルトップ = "0";
svg.style.left = "0";

(i = 0; i &lt; 10; i++ とします) {
line = document.createElementNS("http://www.w3.org/2000/svg", "line");
color = `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("ストローク", 色);
line.setAttribute("ストローク幅", 1);
svg.appendChild(行);
            }
ボードに子要素を追加します。
        }

captcha = generateCaptcha();

関数verifyCaptcha() {
入力を document.getElementById('captchaInput').value にします。
if (入力 === キャプチャ) {
alert('検証に合格しました!');
} それ以外 {
alert('キャプチャが正しくありません!');
            }
        }
    </script>
</body>
</html>

個人プロフィール

彼は 30 年以上テクノロジーの研究に専念しており、java、linux、javascript、php、css などのさまざまな言語に堪能であり、オープンソース分野で多くの貢献を行っています。将来の参考のために技術開発におけるいくつかの問題を共有する開発者ドキュメント ステーション。

私の連絡先情報

郵便