この記事では、クラス抽選アプレットを実装するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: nginx rewriteを使用してURLをリダイレクトする方法
>>: MySQL 5.7.16 無料インストール版のインストールと設定方法のグラフィックチュートリアル
ウェブサイトのデザインを編集または変更する必要がある場合、CSS が重要な役割を果たします。 CSS...
今日システムを再インストールした後、コンピューターに mysql を再インストールし、ZIP ファイ...
データベース MySQL バージョン 8.0.18 DBeaver.exeをダウンロードするダウンロ...
innodb_autoinc_lock_mode パラメータは、auto_increment 列を持...
1. インストール手順 Linux 環境でのローカル インストールと比較すると、Docker のイン...
開発プロセス中によく発生する問題は、div のサイズ変更をどのように監視するかということです。たとえ...
マウスイベントマウスが特定の操作を実行すると、イベント オブジェクトが生成され、イベントがトリガーさ...
誰でも時々データをコピーして貼り付ける必要があると思います。コピーして貼り付けるためにファイルを開く...
1. 絶対パスまず、ローカル コンピューターでは、ファイルの絶対パスは、当然、ハード ディスク上でフ...
この記事では、ユーザーのログイン切り替えを実現するためのVueの具体的なコードを例として紹介します。...
目次1. 最も適切なフィールド属性を選択する2. フィールドをNOT NULLに設定してみる3. サ...
この記事では、ネイティブ JS で実装されたデジタル時計エフェクトを紹介します。エフェクトは次のとお...
この記事を読む前に、ボリュームとバインドマウントの基本を理解しておいてください。詳細については、次の...
セットアップは、結合された API を記述するために使用されます。テンプレートが使用できるようにする...
1. HTML_falshアニメーションでのマルチメディアの応用(WebページへのFlashアニメー...