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 の紹介
推薦する
HTML 順序なしリスト 箇条書き 画像を使用した CSS の記述
少なくとも 5 冊のベストセラー書籍の順序なしリストを含む HTML ページを作成します。各書籍の前...
HTML チュートリアル: よく使われる HTML タグのコレクション (6)
関連記事:初心者が学ぶ HTML タグ (5)導入された HTML タグは、必ずしも XHTML 仕...
Markodwnによるタイトル配置による同期スクロールのアイデアの詳細な説明
序文私が作成中の Markodwn エディターに同期スクロール機能を追加する必要があります。Baid...
React+Typescriptはカウントダウンフックメソッドを実装します
まず、setIntervalはフックとしてカプセル化されます👇 'react' から...
HTML の基礎: HTML コンテンツの詳細
まずは本体から始めましょう:ウェブページを閲覧するとき、最初に目に留まるのは通常、ページの背景です。...
メタタグのビューポートはデバイス画面のCSSを制御します
コードをコピーコードは次のとおりです。 <meta name="viewport&q...
jQuery キャンバスは QR コード付きのポスターを生成します
この記事では、jQuery キャンバスを使用して QR コード付きのポスターを生成するための具体的な...
MySQL デッドロックのトラブルシューティング プロセスの完全な記録
序文これまで遭遇したデータベースのデッドロックはすべて、バッチ更新中のロック順序の不一致が原因でした...
入力ファイルの制御と美化について
一部のWebサイトでアップロードする場合、「参照」ボタンをクリックすると、[ファイルの選択]ダイアロ...
JavaScriptはすべての選択と選択解除の操作を実装します
この記事では、JavaScriptで全選択と全選択解除の操作を実装するための具体的なコードを参考まで...
CSSオーバーフローメカニズムについての簡単な説明
CSS オーバーフローのメカニズムを詳細に学ぶ必要があるのはなぜですか?実際の開発プロセスでは、コン...
MySQL ログの設定と表示方法
MySQL には次のログがあります。エラーログ: -log-errクエリログ: -logスロークエリ...
WeChatミニプログラムページとコンポーネント間の情報伝達と機能呼び出し
今回は、私自身の開発経験を踏まえて、以下の観点で関連内容を解説します。ページからコンポーネントにデー...
JavaScriptでフロアナビゲーションエフェクトを作成するプロセスの詳細な説明
目次この期間の目標1. 関数の実装1.1 構造層1.2 スタイルレイヤー1.3 行動層1.3.1 フ...
HTML の 2 つのタブ ナビゲーション間の競合の解決方法
まず問題の説明から始めましょう:同じページで、1 つのタブに float:left が必要で、もう ...