ランダムロールコールテーブルを実装するためのネイティブJavaScript

ランダムロールコールテーブルを実装するためのネイティブJavaScript

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

効果:

コード:

<!DOCTYPE html>
<html>
 <ヘッド>
 <メタ文字セット="UTF-8">
 <タイトル></タイトル>
 <スタイル>
  。箱{
  幅:300ピクセル;
  高さ:200px;
  境界線:1px実線 #ccc;
  /*位置: 絶対;
  左:0;
  右:0;
  トップ:0;
  下:0;
  マージン: 自動;*/
  マージン: 100px 自動;
  テキスト配置: 中央;
  }
  h1{
  幅:150ピクセル;
  高さ:60px;
  行の高さ: 60px;
  テキスト配置: 中央;
  フォントサイズ: 30px;
  背景色: 赤;
  マージン: 10px 自動;
  }
  ボタン{
  幅:100ピクセル;
  高さ:40px;
  背景色: ドジャーブルー;
  境界線:0;
  フォントサイズ: 24px;
  色:#fff;
  }
  
  
 </スタイル>
 </head>
 <本文>
 <div class="box">
  <h1></h1>
  <button>開始</button>
  <button>停止</button>
 </div>
 <スクリプト>
  var h1=document.getElementsByTagName('h1')[0];
  var btn = document.getElementsByTagName("ボタン");
  var arr=["Su Chenxu","Zhang Zhiyang","Xiao Ming","Social Brother Kun","Yao","Jing Zhen","Jin Tao","Network Manager","Social Brother Chen","Zha Nan","Xue","Baby Man","Big Guy","Sleeping God","Long Ye","Ying Er","Northeast Baby","Ke Ke","Very Young Girl","Gou Dan","Gou Zi","Tian Jiao","Zhi Qiang","Jin Wei","Haitao","Sister Mai","Xin Feng","Sister Huan","Er Gou"];
  
  var ind = ranFun(0,arr.length-1)
  
  h1.innerHTML = arr[ind];
  var タイマー;
  btn[0].onclick=関数(){
  クリアインターバル(タイマー)
  タイマー = setInterval(関数(){
   h1.innerHTML=arr[ranFun(0,arr.length-1)]
  },100)
  }
  
  btn[1].onclick=関数(){
  クリアインターバル(タイマー)
  }
  
  関数 ranFun(a,b){
  Math.floor(Math.random()*(b-a+1)+a) を返します。
  }
 </スクリプト>
 </本文>
</html>

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

以下もご興味があるかもしれません:
  • JavaScript で実装されたランダムロールコール機能
  • JavaScript を使用したランダム点呼プログラム
  • js はランダム点呼システムを実装します (例の説明)
  • JSはクラス内でランダムおよびシーケンシャルなロールコールを実装します
  • DOM を使用して指定されたノード名データを新しい XML ファイルにコピー (複製) する js のコード
  • js はランダムロールコール機能を実装します
  • ランダムロールコールを実現するための JS+CSS (サンプルコード)
  • JavaScript によるクラスでのランダム点呼の実装の必要性の具体的な分析
  • JavaScript で実装されたランダムロールコーラーの例の詳細な説明
  • jsはdivノード名を編集する方法を実装します

<<:  Vueでルーティング権限を動的に設定する主なアイデア

>>:  Vue 要素と Nuxt の使用に関するヒントを共有する

推薦する

カルーセル効果を実現するネイティブJavaScript

この記事では、カルーセルの効果を実現するためのJavaScriptの具体的なコードを参考までに共有し...

キャッシュサーバーを構築するためのMemcached方式

序文多くの Web アプリケーションは、リレーショナル データベース管理システム (RDBMS) に...

JavaScript 配列重複排除ソリューション

目次方法1: set: データ型ではなくデータ構造であり、メンバーは一意である方法2: オブジェクト...

あまり使われていない、または誤解されている HTML タグ 10 個

ここでは、あまり使われていない、または誤解されている 10 個の HTML タグを紹介します。あまり...

Vue 名前付きスロットの基本的な使用例

序文名前付きスロットは、スロット内の「name」属性を使用して要素にバインドされます。知らせ: 1....

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

1. MySQL 5.7.11 zipインストールパッケージをダウンロードするこのマシンはwin7 ...

Vueドロップダウンリストの2つの実装方法の比較

Vueドロップダウンリストの2つの実装最初の方法はv-forを使用する <el-select ...

mysql8.0.11クライアントがログインできない問題の解決方法

この記事では、mysql8.0.11クライアントがログインできない問題の解決策を紹介します。参考まで...

純粋なCSSで立体的な画像配置効果を実現するサンプルコード

1. 要素の幅/高さ/パディング/マージンのパーセンテージ基準要素の幅/高さ/パディング/マージンの...

Nginx 経由で Tomcat9 クラスターを構築し、セッション共有を実現する

Nginx を使用して Tomcat9 クラスターを構築し、Redis を使用してセッション共有を実...

MySQL トランザクション分離レベルの原則例分析

導入あなたも面接でこれに遭遇したことがあるはずです。トランザクションの分離レベルについてお話ししまし...

MySQLのネストされたトランザクションで発生する問題

MySQL はネストされたトランザクションをサポートしていますが、それを実行する人は多くありません....

jQueryはシンプルなカルーセル効果を実装します

みなさんこんにちは。今日はカルーセルの実装についてお話しします。私が作成したカルーセルの効果は次のと...

CentOS 7 で Apache (httpd) サービスをインストールおよびアンインストールする詳細な手順

アンインストールまず、次のコマンドを使用して、httpd サービスがインストールされているかどうか、...

Centos7.5でのIPアドレス設定の実装

1. IPアドレスを設定する前に、まずifconfigを使用してネットワークカード情報を表示し、ネッ...