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 無料インストール版のインストールと設定方法のグラフィックチュートリアル

推薦する

Zabbixで指定時間内の変化値を設定する方法の詳細な説明

背景説明: 既存の負荷分散装置には、付加価値状態にある指標があります (増加するだけで減少しないため...

nginx ssl を設定して https アクセスを実装する手順 (初心者向け)

序文サーバーを展開した後、私は大きな喜びを感じながら自分の Web サイトにアクセスし、見たものすべ...

ノードイベントループにおけるイベント実行の順序

目次イベントループブラウザ環境イベントループノード環境イベントループ6つのステージ(1)setTim...

MySQLの3つの用途と違いは同等ではない

MySQLでは判定記号がよく使われますが、等しくない記号はもっと一般的に使われます。次の3つの等しく...

MySQL ストレージエンジン InnoDB の設定と使用方法の説明

MyISAM と InnoDB は、MySQL で最も一般的なストレージ エンジンです。前回の記事で...

Element における複数データ読み込み最適化の実装

目次シナリオコードの実装要約:シナリオ最近、ElementUI をベースにしたバックグラウンド管理シ...

HTML テーブルのオーバーフローの解決方法

テーブルが広い場合は、あふれてしまう可能性があります。たとえば、左と右の 2 つの div がありま...

MySQL における IF()、IFNULL()、NULLIF()、および ISNULL() 関数の使用に関する詳細な説明

MySQL では、IF()、IFNULL()、NULLIF()、および ISNULL() 関数を使用...

Linux で TCP 接続の最大数をテストする方法

序文TCP サーバの最大同時接続数に関して、「ポート番号の上限が 65535 であるため、TCP サ...

CSSテキストシャドウの徐々にぼやける効果の実装

テキストシャドウテキストに影を追加します。テキストとテキスト装飾に複数のシャドウを追加することができ...

Node はあいまい検索用の検索ボックスを実装します

この記事の例では、検索ボックスでファジークエリを実装するためのNodeの具体的なコードを参考までに共...

HTMLフォーム属性のreadonlyとdisabledの使い方

1. readonly 読み取り専用属性なので、値を取得できます2. 無効: 無効な属性、値を取得で...

Linux ssh サービス情報と実行ステータスを表示する方法

Linux での ssh サービス構成など、ssh サーバー構成に関する記事は多数あります。ここでは...

jsはCanvasを使用して複数の画像を1つの実装コードにマージします

解決 関数 mergeImgs(リスト) { const imgDom = document.cre...

上下に空白行があるフォームを挿入する解決策

ウェブページを作成するときに、フォームを挿入した後、フォームの上下に空白行が表示されることがよくあり...