ランダム点呼 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で時間別データと最後の時間別データの差をクエリするアイデアの詳細な説明
推薦する
Vue2.0は適応解像度を実装する
この記事では、適応解像度を実現するためのVue2.0の具体的なコードを参考までに紹介します。具体的な...
js 配列エントリ() 反復メソッドを取得する
目次1.entires() メソッドの詳細な構文2.entires() メソッドの一般的な使用法と注...
VUE ユニアプリテンプレート構文についての簡単な説明
1.v-bind（略称:）コンポーネント プロパティのデータで定義されたデータ変数を使用するか、コン...
Dockerボリュームコンテナ間のデータ共有の実装
ボリュームとは何ですか?ボリュームは英語で容量を意味し、Docker ではデータ ボリューム、つまり...
Linux のインスタンスにパブリック IP アドレスを割り当てる方法
説明するこのインターフェースを呼び出すときは、次の点に注意する必要があります。パブリック IP アド...
要素のel-tree複数選択ツリー（チェックボックス）親子ノードの関連付けが関連付けられていません
属性チェック-厳密公式ドキュメントでは、チェックボックスが表示されるときに親項目と子項目を互いに関連...
異なるページ間のJavaScriptデータ転送（URLパラメータ取得）
Web ページでは、あるページに情報を入力すると、別のページにジャンプし、入力した情報が別のページ...
MySQL 8.0.15 のインストールと設定のグラフィックチュートリアルと Linux でのパスワード変更
このブログは、MySQL8.0.15 を正常にインストールしたことを思い出すために書きました。以前は...
WeChatミニプログラムは同時通訳を利用して音声認識を実装します
私は同時通訳音声認識機能を使用して、WeChatアプレットのホームページの音声検索機能を実現しました...
JavaScript で長い画像のスクロール効果を実装する
この記事では、JavaScriptの長い画像スクロールの具体的なコードを参考までに共有します。具体的...
MySQL での SQL モードの表示と設定の詳細な説明
MySQL での SQL モードの表示と設定MySQL はさまざまなモードで実行でき、さまざまなシナ...
Vue でのテキストエリア適応高さソリューションの実装
目次隠れた問題適応高さのソリューションまず解決策を提示してください。Vueスタックが必要な学生はvu...
WeChatアプレットはシンプルな手書き署名コンポーネントを実装します
目次背景：必要：効果1. アイデア2. 実装1. ページとスタイル2. 初期化3. クリックすると4...
データベース管理における 19 の MySQL 最適化方法
MySQL データベースを最適化すると、データベースの冗長性を削減できるだけでなく、データベースの実...
Ubuntu 18.04の下のディレクトリにディスクをマウントします
導入この記事では、Ubuntu 18.04 デスクトップ システムでディスクを目的のディレクトリにマ...