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 度書き込み、適応ハッシュ インデックスの詳細

推薦する

Linux でスレッドを作成するための pthread_create の具体的な使用法

pthread_create関数機能紹介pthread_createはUNIX環境のスレッド作成関数...

Linux デュアル ネットワーク カード バインディング スクリプト メソッドの例

Linux の操作と構成作業では、デュアル ネットワーク カードのバインディングがよく使用されます。...

JS 関数とコンストラクタを簡単に理解する

目次1. 概要1.1 Functionコンストラクタを使用して関数を作成する1.2 機能と目的2. ...

Linux でアップロードされたファイルのスケジュールされたバックアップと増分バックアップを実装する方法

導入Alibaba Cloud のような OSS ストレージ サービスを使用している場合は、サービス...

MySQL 5.7.17無料インストール版のインストールと設定

MYSQLバージョン:MySQL Community Server 5.7.17、インストール不要版...

訪問者にあなたのウェブサイトを覚えてもらうための3つの便利なコード

訪問者があなたのウェブサイトを覚えておくのに役立つ3つの便利なコード。お気に入りに追加するためのヒン...

Docker デプロイメント MySQL8 クラスター (マスター 1 台とスレーブ 2 台) の実装手順

目次1. CentOS 7.9 20にDockerをインストールする2. MySQL クラスターをデ...

MySQL 5.7.21 解凍版インストール Navicat データベース操作ツールインストール

MySQL解凍版とNavicatデータベース操作ツールのインストールは、以下のとおりです。 1. M...

エンタープライズプロダクション MySQL 最適化入門

Oracle、DB2、SQL Server などの他の大規模データベースと比較すると、MySQL に...

mysqladmin を使用して MySQL インスタンスの現在の TPS と QPS を取得する方法

mysqladmin は管理と操作を行う公式の mysql クライアント プログラムです。MySQL...

Vue3 プロジェクトで WeChat 認証ログインをエレガントに実装する方法

目次序文準備する実装のアイデアコードについて要約する序文WeChat 認証ログインは、WeChat ...

HTML特殊文字の徹底分析

HTML徹底解析(14)特殊文字 ■ よく使われる特殊文字 HTMLタグを知っていれば、特殊文字の使...

MySQL 5.7.13 のインストールと設定方法の Mac でのグラフィック チュートリアル

MySQL 5.7.13 Mac用インストールチュートリアル、非常に詳細で、以下のように記録されてい...

jQueryでフルスクリーンスクロール効果を実現

この記事の例では、フルスクリーンスクロールを実現するためのjQueryの具体的なコードを参考までに共...

Linux Jenkins 構成スレーブノード実装プロセス図

序文: Jenkins のマスター スレーブ分散アーキテクチャは、主に、Jenkins に単一ポイン...