ランダム点呼 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で時間別データと最後の時間別データの差をクエリするアイデアの詳細な説明
推薦する
MySQL操作テーブルでよく使われるSQLのまとめ
1. テーブル内のフィールドの種類を表示する テーブル名を記述する desc テーブル名 2. テー...
純粋なCSS3で実装されたネオンライト効果
達成される効果は次のとおりです。 マウスがボタン内に移動すると、ネオンライトのような効果が生成され、...
メタ情報に基づいて時間指定のページ更新またはリダイレクトを実装する
メタを使用して、ページの時間指定更新またはジャンプを実装します。 XML/HTML コードコンテンツ...
DockerにElasticsearch7.6クラスタをインストールしてパスワードを設定する方法
目次基本的な設定バージョンとDockerイメージについて始めるelasticsearch.ymlにつ...
入力スクリプトなしでタイプ拡張を使用する方法
序文JS の型付けが弱く、記述基準が緩く、開発ツールのサポートが弱いため、前任者のコードをメンテナン...
HTMLで細い線のテーブルを作成する簡単な例
この細線の表を作成する方法については、Baidu で検索すると、表に対して border="...
Nginx Webサーバーのサンプルコードの設定方法の詳細な説明
概要今日は主に、NGINX を Web サーバーとして設定する方法を共有します。内容は次のとおりです...
1つの記事でTypeScriptのデータ型について学ぶ
目次基本タイプあらゆるタイプ配列タプルインタフェース関数自己推論を入力する結合タイプ（1つ以上選択）...
写真のプレビューとアップロード機能を実現するhtml+css+js
はじめに: Web ページを作成するときに、画像をアップロードする必要がある場合がよくあります。画像...
Linux での Apache サービスの展開と構成
目次1 Apacheの役割2 Apacheのインストール3. Apacheを有効にする4 Apach...
Linux の一般的なコマンドとショートカット キーの紹介
目次1 システムの紹介2 システムショートカット3 一般的なシステムコマンド1 システムの紹介 1....
HTML ページジャンプのパラメータ渡しの問題
効果は以下のとおりです。ページジャンプボタンをクリックした後 対応する値はページ b で取得できます...
VUE v-for の :key の詳細な説明
v-for タグにキーが追加されていない場合。 <!DOCTYPE html> <...
Nexus を使用して Docker リポジトリを作成する方法
公式の Docker レジストリを使用して作成されたウェアハウスでは、イメージを削除してもデフォルト...
JavaScript でローカル変数をグローバル変数に変換する方法
まず関数の自己呼び出しを知る必要がある関数の自己呼び出し - 自己呼び出し関数1 回限りの関数 - ...