JS はランダム点呼システムを実装します
|
参考までに、JSを使用してランダム点呼システムを実装します。具体的な内容は次のとおりです。 毎回の授業の 10 分前に、先生は私たちに質問に答えるように言いましたが、そのたびに生徒の番号を読み上げ、私が毎回勝っているように思えました。そこで、私は先生に直接、「先生、JS を使用してランダム点呼システムの作成を手伝わせてください」と提案しました。こうすれば毎回選ばれることはないよ、ハハ まず効果を見てみましょう:
コードは次のとおりです。
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<meta http-equiv="X-UA-compatible" content="IE=edge">
<meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
<title>ドキュメント</title>
</head>
<本文>
<button id="box1">開始</button>
<button id="box2">終了</button>
<span id="box">トム</span>
<スクリプト>
//ページ内の要素を取得します。var btn1 = document.getElementById('box1');
var btn2 = document.getElementById('box2');
var span = document.getElementById('box');
var names = ['トム', 'ジャック', 'ルーシー', 'ピーター', 'マーク', 'ミン', 'リウ', 'ラニ'];
var タイマー;
btn1.onclick = 関数() {
window.clearInterval(タイマー);
タイマー = window.setInterval(countName, 100);
};
btn2.onclick = 関数() {
window.clearInterval(タイマー);
};
関数 countName() {
var index = parseInt(Math.random() * names.length);
span.innerHTML = 名前[インデックス];
}
</スクリプト>
</本文>
</html>以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Alpine イメージに Ansible サービスを追加する方法
>>: バージョン管理ツール Rational ClearCase の紹介
推薦する
JavaScriptのクローン作成についての簡単な説明
目次1. 浅いクローニング2. ディープクローニング1. 浅いクローニング浅いクローンでは配列やオブ...
Vueにログイン認証傍受機能を設置するアイデアを詳しく解説
目次1. 解決策2. サーバーから返されたトークンをブラウザに保存する3. リクエストにアクセス権限...
Docker クロスホストネットワーク (オーバーレイ) の実装
1. Dockerのホスト間通信Docker クロスホスト ネットワーク ソリューションには以下が含...
Ubuntu Server 16.04 MySQL 8.0 のインストールと設定のグラフィックチュートリアル
Ubuntu Server 16.04 MySQL 8.0 のインストールと設定のグラフィックチュー...
スタイルを書く際の背景色宣言の重要性
タイトルの通り、ページを修正すると以下のような状況が発生する可能性があります。現在、古いページを改修...
JavaScript ベースのランダム点呼システムの実装
この記事では、ランダムロールコーラーを実装するためのJavaScriptの具体的なコードを参考までに...
IIS 7.5では、HTMLはSHTMLのようなinclude関数（モジュールマッピングの追加）をサポートします。
最初はたくさんのエラーを見つけましたが、実際には非常に簡単です。shtm の元の設定を参照するだけで...
Linux 上の Tomcat で MySQL にデータを挿入するときに中国語の文字化けが発生する問題を解決する
1. 問題Windows 上の Eclipse を使用して開発されたプロジェクトは Windows ...
MySQL InnoDB トランザクション ロック ソースコード分析
目次1. ロックとラッチ2. 繰り返し読み取り3. インサートロックプロセス3.1 ロックモード3....
ウェブデザインのためのロイヤルブルーのカラーマッチング入門
古典的な色の組み合わせは力と権威を伝え、強いロイヤルブルーはあらゆる古典的な色の組み合わせの中心的な...
MySQL インデックス プッシュダウンを 5 分で理解する
目次インデックス プッシュダウンとは何ですか?インデックスプッシュダウン最適化の原理インデックスプッ...
親要素に対する CSS 子要素の配置の実装
解決親要素に position:relative を追加します。子要素に position:abso...
JavaScript データのフラット化の詳細な説明
目次フラット化とは何か再帰トストリング減らすアンダーコア_.平坦化_。連合_。違い要約するフラット化...
Dockerコンテナの原理の分析
目次01 コンテナの本質とは何か？ 02 Cgroupテクノロジーと名前空間テクノロジーの概要03 ...
win2008R2 64 ビット システムでの mysql5.7.17 のインストールと構成の例
123WORDPRESS.COM では、さまざまな環境での MYSQL の他のバージョンのインストー...