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

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JS に基づく乱数抽選の例

<<:  nginx rewriteを使用してURLをリダイレクトする方法

>>:  MySQL 5.7.16 無料インストール版のインストールと設定方法のグラフィックチュートリアル

推薦する

ウェブデザインを改善するための 8 つの CSS ツールを共有する

ウェブサイトのデザインを編集または変更する必要がある場合、CSS が重要な役割を果たします。 CSS...

mysql8.0.14.zip のインストール中にデータ フォルダを自動的に作成できませんでした。サービスを開始できません。

今日システムを再インストールした後、コンピューターに mysql を再インストールし、ZIP ファイ...

DBeaver を MySQL バージョン 8 以降に接続し、起こりうる問題を解決する方法の詳細な説明

データベース MySQL バージョン 8.0.18 DBeaver.exeをダウンロードするダウンロ...

MySQL innodb_autoinc_lock_mode について

innodb_autoinc_lock_mode パラメータは、auto_increment 列を持...

DockerでRedashの中国語版をデプロイしてインストールする方法の詳細な説明

1. インストール手順 Linux 環境でのローカル インストールと比較すると、Docker のイン...

iframe を通じて DOM 要素のサイズ変更を監視する

開発プロセス中によく発生する問題は、div のサイズ変更をどのように監視するかということです。たとえ...

JavaScript マウスイベントのケーススタディ

マウスイベントマウスが特定の操作を実行すると、イベント オブジェクトが生成され、イベントがトリガーさ...

Linux リダイレクトの使用方法の詳細な説明

誰でも時々データをコピーして貼り付ける必要があると思います。コピーして貼り付けるためにファイルを開く...

ウェブページ作成における絶対パスと相対パスの違い

1. 絶対パスまず、ローカル コンピューターでは、ファイルの絶対パスは、当然、ハード ディスク上でフ...

Vueはユーザーログイン切り替えを実装します

この記事では、ユーザーのログイン切り替えを実現するためのVueの具体的なコードを例として紹介します。...

MySQL データベースの最適化に関する 9 つのヒント

目次1. 最も適切なフィールド属性を選択する2. フィールドをNOT NULLに設定してみる3. サ...

デジタルテーブル特殊効果を実現するネイティブJS

この記事では、ネイティブ JS で実装されたデジタル時計エフェクトを紹介します。エフェクトは次のとお...

Docker データ ストレージ tmpfs マウントの詳細な説明

この記事を読む前に、ボリュームとバインドマウントの基本を理解しておいてください。詳細については、次の...

setup+ref+reactive は vue3 の応答性を実装します

セットアップは、結合された API を記述するために使用されます。テンプレートが使用できるようにする...

HTML マルチメディア アプリケーション: Web ページにフラッシュ アニメーションと音楽を挿入する

1. HTML_falshアニメーションでのマルチメディアの応用(WebページへのFlashアニメー...