JavaScriptはランダムコードの生成と検証を実現する

JavaScriptでのランダムコードの生成と検証は参考までに。具体的な内容は以下のとおりです。

イベントソースを取得する方法は 2 つあるため、両方をここに添付します。

これはvarを使って直接定義されます

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>ランダム検証コードによる検証</title>
    <スタイル タイプ="text/css">
        ＃コード{
            幅: 100ピクセル;
            高さ: 100px;
            背景色: #ddd;
            パディング: 10px;
            行の高さ: 100px;
            テキスト配置: 中央;
            フォントサイズ: 20px;
            色: 赤;
            /*フォントの太さ: 太字;*/
        }
    </スタイル>
</head>
<本文>
    <div id="コード"></div>
    <input type="text" name="" id="newCode">
    <input type="button" name="" id="validate" value="検証">
    <script type="text/javascript">
        window.onload = 関数 (){
            var コード;
            // 1. 対応するタグを取得します。 var codeDiv = document.getElementById("code");
            var newCodeInput = document.getElementById("newCode");
            var 検証 = document.getElementById("検証");

            // 対応する検証コードを取得するためにページをロードします creatCode()

            // 1. 最小値と最大値の間の整数（1～100）を取得します
            関数ランダム(最大,最小){
                Math.floor(Math.random()*(max-min)+min) を返します。
            }

            関数createCode(){
                コード = "";
                // 長さを設定します var codeLenth = 4;
                var randomCode =[0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
                for(var i=0;i<codeLenth;i++){
                    // ランダム範囲を 36 の範囲に設定します。var index = random(0,36);
                    コード += ランダムコード[インデックス];
                }
                codeDiv.innerHTML = コード;
            }
            // 検証ボタンの検証validate.onclick = function (){
                // ユーザーが入力した確認コードを取得します。 var newCode = newCodeInput.value.toUpperCase();
                if (newCode === コード){
                    //対応する URL に正常にジャンプしたことを確認します window.location.href = "http://www.baidu.com";
                }それ以外 {
                    // 検証失敗アラート("検証に失敗しました。再入力してください")
                    // 入力ボックスを空にします newCodeInput.value = "";
                    // 確認コードを再度取得します creatCode();
                }
            }
        }
    </スクリプト>
</本文>
</html>

関数を使用して変数を定義する方法は次のとおりです。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>ランダム検証コードによる検証</title>
    <スタイル タイプ="text/css">
        ＃コード{
            幅: 100ピクセル;
            高さ: 100px;
            背景色: #ddd;
            パディング: 10px;
            行の高さ: 100px;
            テキスト配置: 中央;
            フォントサイズ: 20px;
            色: 赤;
            /*フォントの太さ: 太字;*/
        }
    </スタイル>
</head>
<本文>
    <div id="コード"></div>
    <input type="text" name="" id="newCode">
    <input type="button" name="" id="validate" value="検証">
    <script type="text/javascript">
        window.onload = 関数 (){
            var コード;
            // 1. 対応するタグを取得する（イベントソースを取得する）
            関数 $(id){
                戻り値の型は id === "string" ですか?document.getElementById(id):null;
            }

            // 対応する検証コードを取得するためにページをロードします creatCode()

            // 1. 最小値と最大値の間の整数（1～100）を取得します
            関数ランダム(最大,最小){
                Math.floor(Math.random()*(max-min)+min) を返します。
            }

            関数createCode(){
                コード = "";
                // 長さを設定します var codeLenth = 4;
                var randomCode =[0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
                for(var i=0;i<codeLenth;i++){
                    // ランダム範囲を 36 の範囲に設定します。var index = random(0,36);
                    コード += ランダムコード[インデックス];
                }
                $("コード").innerHTML = コード;
            }
            // 検証ボタンのチェック $("validate").onclick = function () {
                // ユーザーが入力した確認コードを取得します。 var newCode = $("newCode").value.toUpperCase();
                if (newCode === コード){
                    //対応する URL に正常にジャンプしたことを確認します window.location.href = "http://www.baidu.com";
                }それ以外 {
                    // 検証失敗アラート("検証に失敗しました。再入力してください")
                    // 入力ボックスを空にします$("newCode").value = "";
                    // 確認コードを再度取得します creatCode();
                }
            }
        }
    </スクリプト>
</本文>
</html>

どちらの方法でも同じ効果が得られます。効果画像を添付します: