ランダムロールコールテーブルを実装するためのネイティブ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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Vueでルーティング権限を動的に設定する主なアイデア
>>: Vue 要素と Nuxt の使用に関するヒントを共有する
推薦する
XHTML 入門チュートリアル: XHTML とは何ですか?
HTMLとは何ですか?簡単に言えば、HTML は Web ページを作成するために使用されます。とて...
選択ドロップダウンボックスの値をIDに渡してコードを実装する方法
完全なコードは次のとおりです。 HTMLコード:コードをコピーコードは次のとおりです。 <!-...
xshellを使用してLinuxサーバーに接続する
xshellを使用してLinuxに接続する利点Windows環境でLinuxを直接操作できるインター...
HTML はモバイル上で固定フローティング半透明検索ボックスを実装します
質問。モバイルショッピングモールシステムでは、ページの上部に検索ボックスがよく見られます。ブロガーは...
Angularルーティングサブルートの詳細な説明
目次1. サブルート構文2. 例1. 2つの新しいコンポーネントを作成し、その内容を変更する2. ル...
element-uiのアップロードコンポーネントでファイルやその他のパラメータを転送する際の問題を分析する
最近、element-ui を統合したプロジェクトで vuethink を使用しました。以前は bo...
ホバー生成の境界線によって生じる要素の移動を解決する方法
序文hover疑似クラスが要素に境界線を追加すると、要素内のコンテンツがずれることがあります。box...
MySQL のスロークエリの方法と例
1. はじめにスロークエリログを有効にすると、MySQL は指定された時間を超えるクエリステートメン...
JavaScript 関数呼び出し、適用、バインド メソッドのケース スタディ
要約する1. 類似点どちらも、ターゲット関数が実行されると内部の this ポインターを変更できます...
CSSは下部のタップバー機能を実装します
現在多くの携帯電話には、下部のタブバーを切り替える機能があります。私も最近、同様の機能を見つけました...
MySQL で結合を使用して SQL を最適化する方法の詳細な説明
0. 以下のテストに関連する表を準備する関連するテーブル作成ステートメントについては、https:/...
Linuxファイルを表示するコマンドの詳細な説明
Linuxファイルを表示する方法ファイルの内容を表示するコマンド: catは最初の行からコンテンツを...
HTMLの基礎を徹底解説（第1部）
1. WEBを理解するWeb ページは主にテキスト、画像、ハイパーリンクなどの要素で構成されていま...
LambdaProbe を使用して Tomcat を監視する方法
導入： Lambda Probe (旧称 Tomcat Probe) は、Apache Tomcat...
React antd タブの切り替えによりサブコンポーネントが繰り返し更新される
説明する： Tabs コンポーネントが切り替わると、TabPane に含まれる同じサブコンポーネント...