ランダム点呼 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で時間別データと最後の時間別データの差をクエリするアイデアの詳細な説明
推薦する
マウスを傾けた状態でのフリップナビゲーションの問題に関する研究
この記事では、マウス フリップナビゲーションの制作についてまだ疑問を持っている友人の役に立つことを期...
CSS3 背景コントロールプロパティと色遷移を使用してグラデーション効果を実現します。
CSS3 背景画像関連互換性: IE9+背景クリップ 背景画像描画領域background-cli...
HTMLを使用してスクリーンショットを撮り、ローカル画像として保存するための実装コード
具体的なコードは次のとおりです。 <!DOCTYPE html> <html>...
Centos7.5 構成 Java 環境のインストール Tomcat の説明
Tomcat は Java 言語をベースにした Web サーバー ソフトウェアです。この記事では主に...
docker を使用して Kong クラスター操作を構築する
docker コンテナの下に kong クラスターを構築するのは非常に簡単です。公式サイトの紹介も非...
MySQL マルチテーブルクエリ例の詳しい解説 [リンククエリ、サブクエリなど]
この記事では、例を挙げて MySQL のマルチテーブル クエリについて説明します。ご参考までに、詳細...
HTMLテキストの一般的なイベントとメソッドの詳細な説明
イベントの説明onactivate: オブジェクトがアクティブ要素として設定されたときに発生します。...
Vue で Excel インポート機能を実装する詳細な手順
1. フロントエンド主導の実装手順最初のステップは、ページのインポートボタンをクリックしてExcel...
CSSプロパティに基づいたボタンホバーボーダーと背景アニメーションのコレクション
ハートの属性不透明度: .999 は要素のスタッキングコンテキストを作成し、ボタン6と8のアニメーシ...
MySQL コード実行構造例の分析 [シーケンス、分岐、ループ構造]
この記事では、例を使用して MySQL コード実行構造について説明します。ご参考までに、詳細は以下の...
JavaScript の差異を利用して比較ツールを実装する
序文仕事では、毎週従業員が提出した資料を数える必要がありますが、それを一つずつコピーして貼り付けるの...
純粋なCSSを使用してスイッチ効果を実現する
まずアイデアはこの効果を実現するには、 <input type="checkbox&...
シンプルな CSS テキストアニメーション効果
成果を達成する 実装コードhtml <div id=コンテナ> いらっしゃいませ <...
シンプルなCSSアニメーションのtransition属性の詳しい説明
1. 遷移属性の理解1. transition 属性は、次の 4 つの遷移プロパティを設定するために...
ウェブページ入力ボックスのスタイルトリガー効果
<br />この例では、主に onblur と onFocus という 2 つのパラメー...