ランダム点呼 Web ページを実装するための JavaScript
|
JavaScriptは、参考のためにランダムな点呼Webページを作成します。具体的な内容は次のとおりです。
<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="UTF-8">
<title>ドキュメント</title>
<スタイル>
* {
マージン: 0;
パディング: 0;
}
＃箱 {
border: 1px solid black;/*ボックスの境界線と色を設定します*/
幅: 500ピクセル;
高さ: 500px;
margin: 100px auto;/*上から200px、中央揃え*/
background-color: #000000;/*ボックスの背景色*/
position: relative;/*位置指定*/
}
p{
幅: 500ピクセル;
高さ: 200px;
text-align: center;/*テキストを中央揃えにする*/
line-height: 200px;/*行の高さを設定する*/
font-size: 80px;/*フォントサイズ*/
色: #ffff00;
}
#アニウ {
幅: 200ピクセル;
高さ: 50px;
背景色:#00aaff;
位置: 絶対;
bottom: 100px;/*下から100px*/
左: 50%;
左マージン: -100px;
色: #ffffff;
フォントサイズ: 20px
}
</スタイル>
</head>
<本文>
<div id="ボックス">
<p id="wenben">ランダム点呼</p>
<input type="button" value="点呼開始" id="anniu">
</div>
</本文>
<スクリプト>
var wenben = document.getElementById("wenben")
var anniu = document.getElementById("anniu")
var timer //タイマーを定義 var arr = ['Liu Yi', 'Chen Er', 'Zhang San', 'Li Si', 'Wang Wu', 'Zhao Liu', 'Sun Qi', 'Zhou Ba', 'Wu Jiu', 'Zheng Shi']
var テスト = true
anniu.onclick = 関数() {
if (テスト) {
始める（）
anniu.innerHTML = "終了"
テスト = 偽
} それ以外 {
停止（）
anniu.innerHTML = "開始"
テスト = 真
}
}
関数 start() { /*開始*/
タイマー = setInterval(関数ランダム() {
var インデックス = parseInt(Math.random() * arr.length)
wenben.innerHTML = arr[インデックス]
}, 50);
}
関数 stop() { /*終了*/
クリアインターバル(タイマー)
}
</スクリプト>
</html>効果は以下のとおりです。
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux での fuser コマンドの使用法の詳細な説明
>>: MySQLで時間別データと最後の時間別データの差をクエリするアイデアの詳細な説明
推薦する
4つのReactコンポーネントにおけるDOMスタイル設定の詳細な説明
1. インラインスタイル仮想DOMにインラインスタイルを追加するには、式を使用してスタイルオブジェク...
CocosCreator最適化DrawCallの詳細な説明
目次序文ドローコールとはDrawCall はパフォーマンスにどのような影響を与えますか?ドローコール...
下線を実現するための CSS3 トランジションの例コード
この記事では、下線を実現するための CSS3 トランジションのサンプル コードを紹介します。このコー...
Linux の crw、brw、lrw などのファイル属性は何ですか?
ファイルとは何ですか?すべてのファイルは実際には文字列のストリームですが、適切な解析方法を使用すると...
DockerでPrometheusをインストールする詳細なチュートリアル
目次1. Node Exporterをインストールする2. cAdvisorをインストールする3. ...
SQLクエリの実行順序をゼロから学ぶ
SQL クエリ ステートメントの実行順序は次のとおりです。 （7）選択 (8) DISTINCT &...
カルーセル効果を作成するためのjs
カルーセルはフロントエンド開発において比較的重要なポイントだと思います。ネイティブjsの知識ポイント...
Dockerfile を使用して Docker でイメージを構築する方法
イメージを構築するこれまで、テストやデモンストレーションにさまざまなイメージを使用しました。多くの場...
WeChatアプレットがシンプルな計算機機能を実装
この記事では、WeChatアプレットの計算機機能を実装するための具体的なコードを参考までに紹介します...
React antdはフォームの動的な増減を実現します
以前、動的フォームを記述しているときに落とし穴に遭遇しました。インデックスの添え字をキーとして使用す...
JavaScript のプライベート クラス フィールドと TypeScript のプライベート修飾子の詳細な説明
目次JavaScript のプライベート クラス フィールドとプライバシーの必要性JavaScrip...
MySQL で 2 つのテーブルをクエリする場合の from と join の違いの概要
序文MySQL では、複数テーブル結合クエリは非常に一般的な要件です。複数テーブルクエリを使用する場...
Vueは3段階のナビゲーション表示と非表示を実装します
この記事では、3階層ナビゲーションの表示と非表示を実現するためのVueの具体的なコードを例として紹介...
MySQLはストアドプロシージャを使用して数百万のデータを素早く追加します。サンプルコード
序文インデックスを追加した場合と追加しなかった場合の違いを反映するには、数百万のデータを使用する必要...
Linux で ss コマンドと zabbix を組み合わせてソケットを監視する方法の詳細な説明
目次序文1. ssコマンド2. Zabbix監視マシンの全体的なソケットステータス2.1. スクリプ...