フロントエンドページのスライド検証を実装するための JavaScript + HTML

この記事では、フロントエンドページのスライド検証を実装するためのJavaScript + HTMLの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

クールなフロントエンドページのスライド検証を共有する

コードに直接

<%@ ページ contentType="text/html;charset=UTF-8" language="java" %>
<html>
<ヘッド>
    <title>タイトル</title>
    <!--jQuery の js を導入する -->
    <script type="text/javascript" src="../jquery/jquery.js"></script>
</head>
<スタイル>
    .入力値 {
        幅: 200ピクセル;
        高さ: 32px;
        境界線: 1px 実線 #ddd;
        ボックスのサイズ: 境界線ボックス;
    }
    #キャンバス {
        垂直位置合わせ: 中央;
        ボックスのサイズ: 境界線ボックス;
        境界線: 1px 実線 #ddd;
        カーソル: ポインタ;
    }
    .btn{
        表示: ブロック;
        上マージン: 20px;
        高さ: 32px;
        幅: 100ピクセル;
        フォントサイズ: 16px;
        色: #fff;
        背景色: #457adb;
        境界線: なし;
        境界線の半径: 50px;
    }
</スタイル>
<本文>
<div class="code">
    <input type="text" value="" placeholder="確認コードを入力してください（大文字と小文字は区別されません）" class="input-val">
    <キャンバスid="キャンバス" 幅="100" 高さ="30"></キャンバス>
    <button class="btn">送信</button>
</div>
</本文>
<スクリプト>
    $(関数(){
        var show_num = [];
        描画(表示番号)

        $("#canvas").on('click',function(){
            描画(表示番号)
        })
        $(".btn").on('クリック',function(){
            var val = $(".input-val").val().toLowerCase();
            var num = show_num.join("");
            if(val==''){
                alert('認証コードを入力してください!');
            }それ以外の場合(val == num){
                alert('送信に成功しました!');
                $(".input-val").val('');
                // 描画(show_num);

            }それ以外{
                alert('認証コードが間違っています! 再入力してください!');
                $(".input-val").val('');
                // 描画(show_num);
            }
        })
    })

    //検証コードのグラフィックを生成してレンダリングする function draw(show_num) {
        var canvas_width=$('#canvas').width();
        var canvas_height=$('#canvas').height();
        var canvas = document.getElementById("canvas"); // キャンバス オブジェクト (俳優) を取得します。 var context = canvas.getContext("2d"); // キャンバス描画環境 (俳優のパフォーマンス ステージ) を取得します。 canvas.width = canvas_width;
        キャンバスの高さ = キャンバスの高さ;
        var sCode = "a、b、c、d、e、f、g、h、i、j、k、m、n、p、q、r、s、t、u、v、w、x、y、z、A、B、C、E、F、G、H、J、K、L、M、N、P、Q、R、S、T、W、X、Y、Z、1、2、3、4、5、6、7、8、9、0";
        var aCode = sCode.split(",");
        var aLength = aCode.length; //配列の長さを取得します for (var i = 0; i < 4; i++) { //ここでの for ループは検証コードの桁数を制御できます (6 桁を表示する場合は、4 を 6 に変更するだけです)
            var j = Math.floor(Math.random() * aLength); //ランダムなインデックス値を取得します // var deg = Math.random() * 30 * Math.PI / 180; //0から30の間のランダムなラジアンを生成します var deg = Math.random() - 0.5; //ランダムなラジアンを生成します var txt = aCode[j]; //ランダムなコンテンツを取得します show_num[i] = txt.toLowerCase();
            var x = 10 + i * 20; //キャンバス上のテキストのx座標var y = 20 + Math.random() * 8; //キャンバス上のテキストのy座標context.font = "bold 23px Microsoft YaHei";

            コンテキストを翻訳します(x, y);
            コンテキストを回転します(度);

            context.fillStyle = ランダムカラー();
            コンテキスト.fillText(txt, 0, 0);

            コンテキストを回転します(-deg);
            コンテキストを翻訳します(-x, -y);
        }
        for (var i = 0; i <= 5; i++) { //検証コードに線を表示します context.strokeStyle = randomColor();
            コンテキスト.beginPath();
            コンテキストを移動します。(Math.random() * キャンバスの幅、Math.random() * キャンバスの高さ)
            context.lineTo(Math.random() * キャンバスの幅、Math.random() * キャンバスの高さ);
            コンテキスト.stroke();
        }
        for (var i = 0; i <= 30; i++) { //検証コードに小さなドットを表示します context.strokeStyle = randomColor();
            コンテキスト.beginPath();
            var x = Math.random() * キャンバス幅;
            var y = Math.random() * canvas_height;
            コンテキストを移動します(x, y);
            コンテキスト.lineTo(x + 1, y + 1);
            コンテキスト.s202166112952045troke();
        }
    }

    //ランダムな色の値を取得する function randomColor() {
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        "rgb(" + r + "," + g + "," + b + ")" を返します。
    }

</スクリプト>
</html>

効果は以下のとおりです