JavaScript ベースのランダム点呼システムの実装

JavaScript ベースのランダム点呼システムの実装

この記事では、ランダムロールコーラーを実装するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

HTMLコード:

<本文>
 <h1>点呼</h1>
 <div id="did">
  <input id="rollcall-id" type="button" value="ランダム点呼"><br>
  <input id="アクションID" type="送信" onclick="doClick()" value="開始">
 </div>
</本文>

CSSコード:

<スタイル>
 * {
  マージン: 0px;
  パディング: 0px;
 }

 体 {
  背景色: rgb(255, 249, 249);
 }

 h1 {
  テキスト配置: 中央;
  パディング上部: 100px;
  色: rgba(250, 54, 129, 0.562);
 }

 #した {
  位置: 相対的;
  幅: 200ピクセル;
  マージン: 60px 自動;
 }

 #入力しました:first-child {
  幅: 200ピクセル;
  高さ: 60px;
  背景色: rgba(250, 54, 129, 0.562);
  /* 境界線なし、または境界線を透明に設定する*/
  境界線: なし;
  境界線の半径: 20px;
  フォントサイズ: 25px;
  色: #fff;
  ボックスの影: 0px 0px 3px 3px rgba(250, 54, 129, 0.158);
  /* クリックすると境界線が消えます*/
  アウトライン: 0;
 }

 #入力しました:nth-last-child(1) {
  幅: 100ピクセル;
  高さ: 40px;
  マージン: 40px 50px;
  背景色: rgba(250, 54, 129, 0.562);
  境界線: 1px 透明の実線;
  背景色: rgba(255, 68, 177, 0.432);
  境界線の半径: 15px;
  ボックスの影: 0px 0px 2px 2px rgba(250, 54, 129, 0.158);
  フォントサイズ: 17px;
  色: #333;
  アウトライン: 0;
  トランジション: カラー 0.2 秒のイーズアウト;
  遷移: box-shadow 0.2s イーズアウト;
 }

 #入力しました:nth-last-child(1):hover {
  色: #fff;
  カーソル: ポインタ;
  ボックスの影: 0px 0px 4px 4px rgba(250, 54, 129, 0.158);
 }
</スタイル>

JavaScript コード:

<スクリプト>
 var ロールコール = document.getElementById("ロールコールID");
 var アクション = document.getElementById("アクションID");
 var h1 = document.getElementsByTagName("h1");

 //名前は使用できません。名前を使用すると 1 文字しか取得されません。var allName = ["Zhang Liufei", "Gao Yingying", "Zhao Wenyan", "Li Ying", "Deng Chenxi", "Mo Ruolin", "Qin Cheng",
  「呉小玉」、「趙熙」、「馬素英」、「呂琴雅」、「羅洪哲」、「夏素雲」、「謝延志」、
  「曹孟孟」、「李雲樹」、「周鳳橋」、「孫昊」、「江延静」、「楊振凱」、「林樹燕」、
  「千妙妙」、「郭静」、「杜北北」、「童敏然」、「鍾小玲」、「韓雲雲」、「白蘭志」];

 //ランダムな名前を生成する function stringRandom() {
  parseInt(Math.random() * allName.length) を返します。
 }

 var 時間 = null;
 var 運名;
 //開始関数doStart() {
  時間 == null の場合 {
   時間 = setInterval(関数() {
    //ランダムな名前の値を取得します luckName = allName[stringRandom()];
    rollcall.setAttribute("値", luckName);
   }, 100);
  }
 }

 //停止関数doStop() {
  (時間!= null)の場合{
   クリア間隔(時間);
   時間 = null;
  }
 }

 //クリックイベント関数doClick() {
  if (action.value == "開始") {
   //スタイルを変更する action.style.backgroundColor = "#cecece";
   action.style.boxShadow = "0px 0px 2px 2px rgba(100, 100, 100, 0.4)";
   action.value = "停止";
   h1[0].innerHTML = "ロールロール";

   //ランダムロールコールを開始します。doStart();
  } そうでない場合 (action.value == "停止") {
   action.style.backgroundColor = "rgba(255, 68, 177, 0.432)";
   action.style.boxShadow = "0px 0px 2px 2px rgba(250, 54, 129, 0.158)";
   action.value = "開始";
   h1[0].innerHTML = "おめでとう" + luckName + "クラスメイトが話す機会を得ました";

   //停止doStop();
  }
 }
</スクリプト>

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

以下もご興味があるかもしれません:
  • js はロールコーラー用の単純なランダムカラーサンプルコードを実装します
  • jsは単純なランダムロール呼び出しを実装します
  • jsはランダムロールコーラーの簡易版を実装します
  • JS はランダムロールコーラーを実装します
  • ランダムロールコーラーの JavaScript 実装
  • JavaScript は単純なランダムロール呼び出しを実装します
  • JavaScript で実装されたランダムロールコーラーの例の詳細な説明
  • JavaScript で実装されたランダムロールコール機能
  • JavaScript を使用したランダム点呼プログラム
  • js はランダム点呼システムを実装します (例の説明)

<<:  Apache Web サーバーを使用して 2 つ以上のサイトを構成する方法

>>:  InnoDB の主な機能 - 挿入キャッシュ、2 度書き込み、適応ハッシュ インデックスの詳細

推薦する

純粋な JS を使用して vue.js で双方向バインディング機能を実装する方法

目次まず、双方向バインディングを実装するアイデアについて説明します。これらの機能を実装するための j...

Linuxでスクリーンショットを撮って編集するための最高のツール

メインのオペレーティング システムを Windows から Ubuntu に切り替えたとき、最初に考...

コードレイン効果を実現するjQueryプラグイン

この記事では、コードレイン特殊効果を実現するためのjQueryプラグインの具体的なコードを参考までに...

ウェブデザインとは何か

<br />元の記事: http://www.alistapart.com/articl...

MYSQL スロークエリとログ設定とテスト

1. はじめにスロークエリログを有効にすると、MySQL は指定された時間を超えるクエリステートメン...

MySql データ型チュートリアル例の詳細な説明

目次1. 概要2. MySQLデータ型の詳細な説明1) 文字列型2) 整数型3) 浮動小数点型4) ...

VUEトークンの無効化プロセスの詳細な説明

目次ターゲット思考分析コード着陸要約するターゲットトークンの有効期限切れシナリオの処理トークンは、ユ...

表示または可視性によってHTML要素を非表示にする

場合によっては、特定の条件に基づいて Web ページ内の HTML 要素を表示するか非表示にするかを...

MySQLにおけるテーブルインデックスの定義方法と導入

概要インデックスは、テーブル内の 1 つ以上の列に基づいて DBMS によって特定の順序で作成される...

React サーバーサイドレンダリング原則の分析と実践

ほとんどの人は、サーバーサイド レンダリング (SSR と呼んでいます) の概念について聞いたことが...

Nginx の構成と HTTP 実装コード分析との互換性

OpenSSL を使用して SSL キーと CSR ファイルを生成するHTTPS を設定するには、秘...

ウェブデザインにおけるグリッドシステム

グリッドシステムの形成1692年、新しく即位したフランス国王ルイ14世は、フランスの印刷技術のレベル...

CentOS の MySQL に MariaDB をインストールするときに発生する方法と問題

以前にインストールしたmariadbを削除する1. rpm -qa | grep mariadb を...

HTMLテーブルレイアウトの実践的な使い方の詳しい説明

テーブルはいつ使用されますか?最近では、Web ページの全体的なレイアウトにテーブルが使用されること...

ドメイン名を指定されたポートに転送するようにNginxを設定する方法

/usr/local/nginx/conf と入力する sudo cd /usr/local/ngi...