JavaScript はクラス宝くじアプレットを実装します

この記事では、クラス抽選アプレットを実装するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

プロジェクトの表示

このプロジェクトでは、クラスには 30 人しかいないと想定されています。

HTML構造

<div class="outerContainer">
    <div class="question">xx クラスの赤ちゃんを何人描きたいですか? </div>

    <div class="数値">
        <input type="text" style="color: #999;" value="必要な人数を入力してください" onblur="if (this.value == '') {this.value = '必要な人数を入力してください';this.style.color = '#999';}" onfocus="if (this.value == '必要な人数を入力してください') {this.value = '';this.style.color = '#424242';}">
    </div>

    <div class="btnWrapper">
        <button>抽選を開始する</button>
    </div>

    <div class="viewDiv"></div>

    <div class="foot">プロデューサー: chenyu-max</div>
</div>

CSS カスケードスタイル

.outerContainer {
    上マージン: 100px;
}

。質問 {
    上マージン: 30px;
    幅: 100%;
    高さ: 50px;
    行の高さ: 50px;
    フォントサイズ: 25px;
    遷移: すべて .3 秒線形。 
    /* 色が変わるとグラデーション効果が発生します*/
    テキスト配置: 中央;
}

。番号 {
    上マージン: 30px;
    表示: ブロック;
    左: 200px;
    テキスト配置: 中央;
}

.数値入力{
    高さ: 30px;
    フォントサイズ: 20px;
    行の高さ: 30px;
}

.btnラッパー{
    上マージン: 30px;
    幅: 100%;
    高さ: 30px;
    テキスト配置: 中央;
}

.btnWrapper ボタン {
    アウトライン: なし;
    色: rgb(233, 8, 8);
    カーソル: ポインタ;
    境界線の半径: 15px;
    幅: 100ピクセル;
    高さ: 25px;
    行の高さ: 19px;
}

.viewDiv{
    マージン: 20px 自動;
    幅: 900ピクセル;
    高さ: 300px;
    テキスト配置: 中央;
    フォントサイズ: 30px;
    行の高さ: 50px;
    境界線: 1px 黒一色;
}

。足 {
    マージン: 0 自動;
    テキスト配置: 中央;
}

JSロジック

DOM要素を取得する

var input = document.getElementsByTagName('input')[0];
var viewDiv = document.getElementsByClassName('viewDiv')[0];
var btn = document.getElementsByTagName('button')[0];
var question = document.getElementsByClassName('question')[0];

その他の変数

var arr = []; // 抽出場所の生徒番号を保存します var count = 0; // 質問の色を変更するために使用されるカウンター

質問の色の変更

setInterval(関数() {
    var temp = count % 6;
    スイッチ（一時）{
        ケース0:
            質問のスタイルカラー = '赤';
            壊す;
        ケース1:
            question.style.color = '緑';
            壊す;
        ケース2:
            質問.style.color = '青';
            壊す;
        ケース3:
            質問のスタイルカラー = 'グレー';
            壊す;
        ケース4:
            question.style.color = '紫';
            壊す;
        ケース5:
            質問のスタイルカラー = '黒';
            壊す;
        デフォルト：
            壊す;
    }
    カウント++;
}, 700);

宝くじロジック

btn.onclick = 関数() {
    // 入力が 1 〜 30 人かどうかを確認します // クラス サイズが 30 人を超える場合は、input.value < クラス サイズ + 1 に変更します
    var チェック = (関数() {
        入力値 > 0 && 入力値 < 31 の場合 {
            true を返します。
        } それ以外 {
            false を返します。
        }
    }());

    // 入力が正しければくじを引く if (check) {
        var num = 入力値;
        arrr = [];
        (var i = 0; arr.length < num; i++) の場合 {
            // 1 から 30 までの乱数を生成します // 人数を変更する必要がある場合は、乗算記号の後の 30 をクラスで必要な人数に変更します var temp = Math.floor(Math.random() * 30 + 1); // 1 ~ 30
            var フラグ = true;
            arr.forEach(関数(値) {
                // 生成された乱数が既存の数値と重複しないように配列を走査します if (value == temp) {
                    フラグ = false;
                }
            })
            if (フラグ) {
                arr.push(temp);
            }
        }

        // 選択した生徒の生徒番号を昇順に並べ替えます arr.sort(function(a, b) {
            a - b を返します。
        })


        var str = arr.join(", ");
        viewDiv.innerHTML = " <span style='color : red'>以下のかわいい/ハンサムな男性が選ばれたことを祝福します! </span> </br> " + str;
    } それ以外 {
        // そうでない場合はエラーメッセージを出力します // 人数は変更できます viewDiv.innerHTML = "<span style='color : red'>正しい人数を入力してください (1 ~ 30)</span>";
    }
}

機能の追加

document.onkeydown = 関数(e) {
    // Enterキーを押してbtnのonclickイベントをトリガーします。if (e.keyCode == 13) {
        btn.onclick();
    }
}

完全なコード

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>xx クラスの小さな子たちのためにくじ引きをしましょう</title>
    <link rel="icon" href="">
    <スタイル>
        .outerContainer {
            上マージン: 100px;
        }
        
        。質問 {
            上マージン: 30px;
            幅: 100%;
            高さ: 50px;
            行の高さ: 50px;
            フォントサイズ: 25px;
            遷移: すべて .3 秒線形。
            テキスト配置: 中央;
        }
        
        。番号 {
            上マージン: 30px;
            表示: ブロック;
            左: 200px;
            テキスト配置: 中央;
        }
        
        .数値入力{
            高さ: 30px;
            フォントサイズ: 20px;
            行の高さ: 30px;
        }
        
        .btnラッパー{
            上マージン: 30px;
            幅: 100%;
            高さ: 30px;
            テキスト配置: 中央;
        }
        
        .btnWrapper ボタン {
            アウトライン: なし;
            色: rgb(233, 8, 8);
            カーソル: ポインタ;
            境界線の半径: 15px;
            幅: 100ピクセル;
            高さ: 25px;
            行の高さ: 19px;
        }
        
        .viewDiv{
            マージン: 20px 自動;
            幅: 900ピクセル;
            高さ: 300px;
            テキスト配置: 中央;
            フォントサイズ: 30px;
            行の高さ: 50px;
            境界線: 1px 黒一色;
        }
        
        。足 {
            マージン: 0 自動;
            テキスト配置: 中央;
        }
    </スタイル>
</head>

<本文>

    <div class="outerContainer">
        <div class="question">xx クラスの赤ちゃんを何人描きたいですか? </div>

        <div class="数値">
            <input type="text" style="color: #999;" value="必要な人数を入力してください" onblur="if (this.value == '') {this.value = '必要な人数を入力してください';this.style.color = '#999';}" onfocus="if (this.value == '必要な人数を入力してください') {this.value = '';this.style.color = '#424242';}">
        </div>

        <div class="btnWrapper">
            <button>抽選を開始する</button>
        </div>

        <div class="viewDiv"></div>

        <div class="foot">プロデューサー: chenyu-max</div>
    </div>

    <スクリプト>
        var input = document.getElementsByTagName('input')[0];
        var viewDiv = document.getElementsByClassName('viewDiv')[0];
        var btn = document.getElementsByTagName('button')[0];
        var question = document.getElementsByClassName('question')[0];

        var arr = []; // 抽出した生徒番号を保存します var count = 0; // 質問の色修飾子に使用されるカウンター setInterval(function() {
            var temp = count % 6;
            スイッチ（一時）{
                ケース0:
                    質問のスタイルカラー = '赤';
                    壊す;
                ケース1:
                    question.style.color = '緑';
                    壊す;
                ケース2:
                    質問.style.color = '青';
                    壊す;
                ケース3:
                    質問のスタイルカラー = 'グレー';
                    壊す;
                ケース4:
                    question.style.color = '紫';
                    壊す;
                ケース5:
                    質問のスタイルカラー = '黒';
                    壊す;
                デフォルト：
                    壊す;
            }
            カウント++;
        }, 700);


        document.onkeydown = 関数(e) {
            // Enterキーを押してbtnのonclickイベントをトリガーします。if (e.keyCode == 13) {
                btn.onclick();
            }
        }

        btn.onclick = 関数() {
            // 入力が 1 〜 30 人かどうかを確認します // クラス サイズが 30 人を超える場合は、input.value < クラス サイズ + 1 に変更します
            var チェック = (関数() {
                入力値 > 0 && 入力値 < 31 の場合 {
                    true を返します。
                } それ以外 {
                    false を返します。
                }
            }());

            // 入力が正しければくじを引く if (check) {
                var num = 入力値;
                arrr = [];
                (var i = 0; arr.length < num; i++) の場合 {
                    // 1 から 30 までの乱数を生成します // 人数を変更する必要がある場合は、乗算記号の後の 30 をクラスで必要な人数に変更します var temp = Math.floor(Math.random() * 30 + 1); // 1 ~ 30
                    var フラグ = true;
                    arr.forEach(関数(値) {
                        // 生成された乱数が既存の数字と重複しないように配列を走査します if (value == temp) {
                            フラグ = false;
                        }
                    })
                    if (フラグ) {
                        arr.push(temp);
                    }
                }

                // 選択した生徒の生徒番号を昇順に並べ替えます arr.sort(function(a, b) {
                    a - b を返します。
                })


                var str = arr.join(", ");
                viewDiv.innerHTML = " <span style='color : red'>以下のかわいい/ハンサムな男性が選ばれたことを祝福します! </span> </br> " + str;
            } それ以外 {
                // そうでない場合はエラーメッセージを出力します // 人数は変更できます viewDiv.innerHTML = "<span style='color : red'>正しい人数を入力してください (1 ~ 30)</span>";
            }
        }
    </スクリプト>
</本文>

</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: