ランダムロールコールテーブルを実装するためのネイティブ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 の使用に関するヒントを共有する

推薦する

MySqlはページクエリ機能を実装します

まず、ページ分割クエリを使用する理由を明確にする必要があります。データが膨大なため、すべてのデータを...

MySQL 8.0.24 リリースノートのいくつかの改善点

目次1. 接続管理2. オプティマイザレベルでの改善3. 機能の改善4. パフォーマンススキーマの最...

ウェブページのコピー防止機能の実装方法(クラッキング手法付き)

ソース ファイルを右クリックすると、次のコードが見つかります。 1. CSSを使用してFirefox...

Nginx+FastDFSでイメージサーバーを構築

設置環境セントス環境依存性: yum -y gccをインストールします yum インストール -y ...

ウェブフロントエンド開発の細部

1 選択タグは閉じられている必要があります <select></select>...

iOS スタイルの選択ボックスの開閉機能を実装するための純粋な CSS

1 効果デモアドレス: https://www.albertyy.com/2020/7/check...

Vue3におけるキーの役割と動作原理についての簡単な説明

このキー属性の機能は何ですか?まずは公式の説明を見てみましょう。 kekey 属性は主に、新しいノー...

MySQLデータベースのbinlogクリーンアップコマンドの詳細な説明

概要今日は主に、MySQL データベースから binlog ログを正しく削除する方法を紹介します。ロ...

ウェブレスポンシブレイアウトにおけるiframe適応の方法

問題<br />レスポンシブ レイアウトでは、iframe 要素に注意する必要があります...

IE のテキストモード! DOCTYPE の役割の紹介

前の記事で説明したフォームの自動入力の問題を解決した後、新しい問題が発生しました。ページの一部のスタ...

CSS3 アニメーション ボールローリング JS コントロールアニメーション一時停止

CSS3 はアニメーションを作成でき、多くの Web ページのアニメーション画像、Flash アニメ...

CentOS8.1 で Gitlab サーバーを構築するための詳細なチュートリアル

Gitlab と Github の違いについては、あまり説明する必要はありません。一言でまとめると、...

Dockerコンテナの起動失敗を解決する方法

質問: コンピュータを再起動した後、docker の mysql コンテナを再起動できません。原因が...

Webフロントエンドベクターアイコンの使い方

序文フロントエンドページを書くとき、小さなアイコンなどの画像を使うことが多いです。画像を使うとコード...