ランダムロールコールテーブルを実装するためのネイティブ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 の使用に関するヒントを共有する
推薦する
MySqlはページクエリ機能を実装します
まず、ページ分割クエリを使用する理由を明確にする必要があります。データが膨大なため、すべてのデータを...
MySQL 8.0.24 リリースノートのいくつかの改善点
目次1. 接続管理2. オプティマイザレベルでの改善3. 機能の改善4. パフォーマンススキーマの最...
ウェブページのコピー防止機能の実装方法（クラッキング手法付き）
ソース ファイルを右クリックすると、次のコードが見つかります。 1. CSSを使用してFirefox...
Nginx+FastDFSでイメージサーバーを構築
設置環境セントス環境依存性: yum -y gccをインストールします yum インストール -y ...
ウェブフロントエンド開発の細部
1 選択タグは閉じられている必要があります <select></select>...
Windows 環境下の Linux 仮想マシンで MySQL データベースにアクセスする方法の詳細な説明
Linux 仮想マシン: VMware + Ubuntu 16.04.4 Windows ネイティブ...
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フロントエンドベクターアイコンの使い方
序文フロントエンドページを書くとき、小さなアイコンなどの画像を使うことが多いです。画像を使うとコード...