ランダム点呼 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で時間別データと最後の時間別データの差をクエリするアイデアの詳細な説明
推薦する
Momentsで写真を整理するためのCSSコード
まず、Moments を開いて、写真の数が異なるいくつかのレイアウトを確認するか、以下の例を参照して...
Linux でファイルを実行するときに「そのようなファイルまたはディレクトリはありません」というプロンプトが表示される理由を深く理解する
1 背景最近、ZC706-ARM 開発ボードの Linux システムでコンパイル システム (apt...
Vue ElementUI は非同期読み込みツリーを実装します
この記事の例では、vue ElementUI の非同期読み込みツリーを実装するための具体的なコードを...
Vueは州、都市、地区のカスケード選択を実現します
最近、省、市、地区のカスケード選択効果を実装する必要があります。省、市、地区のデータはすべてローカル...
MySQL は、現在のデータ テーブル内のすべての時間に対して指定された時間間隔を増加または減少させます (推奨)
DATE_ADD() 関数は、指定された時間間隔を日付に追加します。現在のテーブル内のすべてのデー...
MySQL EXPLAIN ステートメントの使用例
目次1. 使用方法2. 出力結果1.id 2.選択タイプ3.表4.パーティション5.タイプ6.可能な...
MySQL インデックスの原理と最適化の詳細な説明
序文この記事は Meituan の大物によって書かれました。とても素晴らしいので、皆さんと共有したい...
MySQL 5.7 のルートパスワードログイン問題の解決策
前回の記事でMySQLサービスが起動しない問題が解決したと分かった後、パスワードなしでrootユーザ...
CSSでスペースを処理する方法
1. 宇宙のルールHTML コード内の空白は通常、ブラウザによって無視されます。 <p>...
3つの簡単な例を使ってハイパーリンクの下線を削除する方法
ハイパーリンクの下線を削除するには、スタイルシート CSS を使用する必要があります。当面は CSS...
Dockerイメージとコンテナの一般的な操作の詳細な説明
画像アクセラレータ中国の Docker Hub からイメージをプルすることが難しい場合があります。こ...
MySQLインスタンスを安全にシャットダウンする方法
この記事では、mysqld プロセスをシャットダウンするプロセスと、MySQL インスタンスを安全か...
MySQLは変数を使用してさまざまなソートを実装します
コアコード -- 以下では、MySQLでのソート列の実装を示します -- テストデータ CREATE...
MySQLの高性能最適化スキルの概要
データベースコマンド仕様すべてのデータベース オブジェクト名には小文字を使用し、アンダースコアで区切...
h5入力ボックスプロンプト+通常のテキストボックスプロンプトを実装する方法
XML/HTML コードコンテンツをクリップボードにコピー<入力 id = "ユーザ...