ランダムロールコールテーブルを実装するためのネイティブ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 の使用に関するヒントを共有する
推薦する
Dockerコンテナを外部IPとポートにバインドする方法
Docker を使用すると、外部からコンテナにアクセスしたり、コンテナを相互接続したりすることで、ネ...
Dockerfile を使用して Docker でイメージを構築する方法
イメージを構築するこれまで、テストやデモンストレーションにさまざまなイメージを使用しました。多くの場...
iframe の多層ネスト、無制限のネスト、高度に適応したソリューション
ページ A、B、C の 3 つがあります。ページ A にはページ B が含まれ、ページ B にはペー...
JavaScript でシンプルなタイマーを実装する
この記事では、参考までに簡単なタイマーを実装するためのJavaScriptの具体的なコードを紹介しま...
MySQLデータベーステーブルの定期バックアップの実装の詳細な説明
Mysqlデータベーステーブルの定期的なバックアップの実装0. 背景実際の開発環境では、フロントエン...
vue cli3は環境ごとにパッケージ化の手順を実装します
cli3 でビルドされた vue プロジェクトは、ゼロ構成ファイルとして知られています。パッケージ化...
MySQL5.7.27-winx64 バージョン win10 のダウンロードとインストールのチュートリアル図
MySQL 5.7 のインストール私たちは学校で MySQL データベースを学んでいます。先生は私た...
Linux の wget コマンドの詳細な紹介
目次まずwgetをインストールするヘルプマニュアルを見る1. wgetを使用して単一のファイルをダウ...
Dockerを使用してMySQLデータベースをインストールするDeepinの詳細な説明
まずMySQLソースをクエリするdocker 検索 mysql公式ウェブサイトにアクセスしてイメージ...
IframeとFRAMEの違いの分析
1. Iframe タグの使用<br />Iframe については、「忘れられた隅」に放...
Vueのよく使われる組み込み命令の詳細な説明
<本文> <div id="ルート"> <h1 ...
MySQL 5.7.27 のダウンロード、インストール、設定に関する詳細なチュートリアル
目次1. ダウンロード手順2. 環境変数を設定する3. my.iniファイルを設定する4. MySQ...
MySQL 8.0 のインストール中に発生した 3 つの小さなエラーの概要
序文これまで当社ではMySQLの5.7シリーズを使用していましたが、バージョン8.0のリリースに合わ...
条件によるMysqlカウントの複数の実装方法を詳細に解説
最近、あるウェブサイトのバックエンドに一連の統計機能を追加していたのですが、条件によるカウントが必要...
Dockerfile を使用して SpringBoot プロジェクトをデプロイする方法
1. SpringBoootプロジェクトを作成し、jarパッケージにパッケージ化する2. Linux...