ランダム点呼 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で時間別データと最後の時間別データの差をクエリするアイデアの詳細な説明
推薦する
iframeを使用してページを呼び出すとページがキャッシュされるかどうかの簡単な分析
最近、毎日変更されるページを iframe を使用して呼び出す必要があるプロジェクトがあります。その...
CentOS 6 は Docker を使用して Redis マスター スレーブ データベース操作例を展開します
この記事では、Docker を使用して Centos6 に Redis マスター/スレーブ データベ...
docker mysqlの起動時に初期化SQLを実行する
1.Mysqlイメージを取得するdocker pull mysql:5.7 2. MySQLイメージ...
HTML ページに SVG を挿入する複数の方法
SVG (Scalable Vector Graphics)は、XML 構文に基づいた画像形式です。...
Linuxでのaliasコマンドの使い方の詳細な説明
1. 別名の使用alias コマンドは、コマンドのエイリアスを設定するために使用されます。このコマン...
HTML タグの表示モード (ブロックレベル タグ、インライン タグ、インライン ブロック タグ) に関する簡単な説明
今日の講義では、HTML におけるタグの表示モードについてお話ししましたが、これはブロックレベルタグ...
Linuxはiftopを使用してネットワークカードのトラフィックをリアルタイムで監視します
Linux は iftop を使用してネットワーク カードのトラフィックをリアルタイムで監視します。...
HTML独習の旅（I）基本要素と属性の練習（自分でコードを書く）
私は W3school のチュートリアルに従いました。チュートリアルはとても良いと思います。各セクシ...
jsはreduceメソッドを使用してコードをよりエレガントにします
序文実際のプロジェクトでは、最も一般的な処理は計算とループロジックである可能性があります。配列でre...
WeChatミニプログラムのすべてのページがログインされていることを確認する方法
目次現状解決さらなる解決策やっと現状WeChat ミニプログラムには、ホームページ、個人ページ、いく...
Linux rpm および yum コマンドとその使用法の詳細な説明
RPM パッケージ管理インターネット ダウンロード パッケージのパッケージ化およびインストール ツー...
Linux が Sudo 権限昇格の脆弱性を公開、どのユーザーでも root コマンドを実行可能
Linux で最も一般的に使用される重要なユーティリティの 1 つである Sudo は、ほぼすべての...
docker の実行に必要な権限の分析
Docker を実行するには root 権限が必要です。非 root ユーザーに docker コマ...
Docker Desktop をインストールすると、エラー メッセージが表示されます: WSL 2 のインストールが完了していません (エラー メッセージを解決してください)
エラーの説明Docker Desktop をインストールすると、WSL2 (Windows ベースの...
CentOS7にPHP7 Redis拡張機能をインストールする方法
導入前回の記事では、Redis をインストールして設定しましたが、まだ終わりではありません。PHP ...