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 の紹介
推薦する
Windows 10にWSL2 Ubuntu20.04をインストールしてdocker環境を構築する方法
WSLを有効にするシステムがWindows 10 2004以降であることを確認してください 「メニュ...
MySQLの日次統計レポートでは、その日にデータがない場合には0が入力されます。
1. 問題の再現:各日の合計数を日ごとにカウントします。データのない日がある場合、グループ化によっ...
MySQL テーブル フィールドの時間設定のデフォルト値
アプリケーションシナリオデータ テーブルでは、アプリケーションは各データがいつ作成されたかを記録する...
Nginx の構成と HTTP 実装コード分析との互換性
OpenSSL を使用して SSL キーと CSR ファイルを生成するHTTPS を設定するには、秘...
MySQL ページング制限の実用的な最適化
序文クエリ ステートメントを使用する場合、多くの場合、データの最初の数行または中間行を返す必要があり...
CentOS7 環境での DHCP 設定チュートリアル
目次CentOS7環境での設定コマンド手順1. DHCP設定ファイルを設定する2. グローバル構成を...
Linux コマンド クエリ アプレットでの WePY クラウド開発の実践
みなさんこんにちは。今日は Linux コマンド クエリ アプレットでの WePY クラウド開発の実...
サーバー上の php-cgi.exe プロセスが多数存在し、CPU が 100% 占有される問題の解決方法
Windows 2003+IIS6 の fastcgi 構成ファイル fcgiext.ini を最適...
Linux 占有ポートの強制解放と Linux ファイアウォールのポート開放方法の詳しい説明
nginx、mysql、tomcat などのサービスをインストールするときに、使用する必要があるポー...
つまり、フィルターコレクション
IE は開発の初期段階では頭を悩ませましたが、他のブラウザとは異なります。他のブラウザがサポートして...
VMware Workstation のダウンロードとインストールの詳細なチュートリアル
仮想マシンは非常に便利なテストソフトウェアです。ハードウェアに損傷を与えることなく、さまざまなテスト...
Vueのトランジションとアニメーションの深い理解
1. DOM要素を挿入、更新、または削除するときに、適切な場合は要素にスタイルクラス名を追加します。...
JSにおけるnewの原理と実装について詳しく話しましょう
目次意味コンストラクタ本体は異なる戻り値なし戻りオブジェクト非オブジェクトを返すプロパティバインディ...
IE8互換表示（IE7モード）とスタンドアロンIE7の違いの詳細な説明
1つ。 IE8 互換表示の概要<br />新しいバージョンのブラウザが古い Web サイ...
優れたHTML印刷コードがページめくりをサポート
ylbtech_html_print HTML 印刷コード、ページめくりをサポートコードをコピーコー...