ランダムロールコールテーブルを実装するためのネイティブ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 の使用に関するヒントを共有する
推薦する
Windows 10 で MySQL の解凍バージョンをインストールする方法の詳細なグラフィック チュートリアル
MySQL のインストールは、インストール バージョンと解凍バージョンに分かれています。インストール...
Linux で nginx を起動および再起動する方法
Nginx (エンジン x) は、IMAP/POP3/SMTP サービスも提供する高性能 HTTP ...
背景画像のみを180度回転させるCSS3実装例
1. 心の旅最近コックピットを書いていたときに、背景画像を単純に特定の角度に回転させるという問題につ...
jQueryは画像の強調表示を実現します
ページ上の画像を強調表示することは非常に一般的です。ここでは、jQuery を使用して画像を強調表示...
MySQL共通ストレージエンジンの機能と使用方法の詳細な説明
この記事では、一般的な MySQL ストレージ エンジンの機能と使用方法を例を使って説明します。ご参...
CentOS に MySQL 8.0 をインストールして設定するための詳細な手順
序文CentOS に MySQL をインストールして設定する手順は次のとおりです。文章yumソースか...
Linux でソフトウェア パッケージのバージョンをアップグレードする方法の詳細な説明
Linux環境で、特定のソフトウェア（パッケージ）がインストールされているかどうかを確認したい。 r...
レスポンシブレイアウトについて知っておくべきこと
1. はじめにレスポンシブ Web デザインにより、Web サイトは複数のデバイスと複数の画面に同時...
ウェブサイトのユーザビリティとコンバージョン率を向上させる 25 のツール
ウェブサイトの場合、ユーザビリティとは、ユーザーが必要な情報を効果的に見つけたり、タスクを完了したり...
Mysql での結合操作
結合の種類1. 内部結合: 結合関係を持つ 2 つのテーブル内のフィールドは、結合関係を満たすレコー...
MySQLループは数千万のデータを挿入する
1. テストテーブルを作成する テーブル `mysql_genarate` を作成します ( `id...
jQuery で従業員管理登録ページを実装する
この記事では、従業員管理登録ページを実装するためのjQueryの具体的なコードを例として紹介します。...
Reactでコンポーネントがどのように通信するかの詳細な説明
1. 何ですかコンポーネント間の通信は、次の 2 つの単語に分けることができます。コンポーネントコ...
CSSとJSでロマンチックな流星群アニメーションを実現
1. レンダリング 2. ソースコードhtml < 本文 > < div クラス ...
変数が空かどうかを判定するシェルの方法の概要
シェルで変数が空かどうかを判断する方法シェルプログラミングでは、パラメータのエラーチェック項目に、変...