ランダムロールコールテーブルを実装するためのネイティブ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 の使用に関するヒントを共有する
推薦する
カルーセル効果を実現するネイティブ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を使用してネットワークカード情報を表示し、ネッ...