この記事では、クラス抽選アプレットを実装するための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 無料インストール版のインストールと設定方法のグラフィックチュートリアル
背景説明: 既存の負荷分散装置には、付加価値状態にある指標があります (増加するだけで減少しないため...
序文サーバーを展開した後、私は大きな喜びを感じながら自分の Web サイトにアクセスし、見たものすべ...
目次イベントループブラウザ環境イベントループノード環境イベントループ6つのステージ(1)setTim...
MySQLでは判定記号がよく使われますが、等しくない記号はもっと一般的に使われます。次の3つの等しく...
MyISAM と InnoDB は、MySQL で最も一般的なストレージ エンジンです。前回の記事で...
目次シナリオコードの実装要約:シナリオ最近、ElementUI をベースにしたバックグラウンド管理シ...
テーブルが広い場合は、あふれてしまう可能性があります。たとえば、左と右の 2 つの div がありま...
MySQL では、IF()、IFNULL()、NULLIF()、および ISNULL() 関数を使用...
序文TCP サーバの最大同時接続数に関して、「ポート番号の上限が 65535 であるため、TCP サ...
テキストシャドウテキストに影を追加します。テキストとテキスト装飾に複数のシャドウを追加することができ...
この記事の例では、検索ボックスでファジークエリを実装するためのNodeの具体的なコードを参考までに共...
1. readonly 読み取り専用属性なので、値を取得できます2. 無効: 無効な属性、値を取得で...
Linux での ssh サービス構成など、ssh サーバー構成に関する記事は多数あります。ここでは...
解決 関数 mergeImgs(リスト) { const imgDom = document.cre...
ウェブページを作成するときに、フォームを挿入した後、フォームの上下に空白行が表示されることがよくあり...