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 の紹介
推薦する
Zabbixで電子メールアラートを実装する方法
オンラインチュートリアルに従って実装しました。 zabbix3.4、スクリプトとsendEmailを...
JS+Canvas でダイナミックな時計効果を実現
参考までに、Canvas をベースにしたダイナミッククロックのデモを用意しました。具体的な内容は次の...
プロフェッショナルなMySQL開発設計仕様とSQL記述仕様
チーム開発のプロセスでは、プロジェクトの安定性、コードの効率性、管理の利便性のために、内部開発および...
Nginx 経由で Tomcat9 クラスターを構築し、セッション共有を実現する
Nginx を使用して Tomcat9 クラスターを構築し、Redis を使用してセッション共有を実...
3つの主要データベース（Mysql、SqlServer、Oracle）の違いについて簡単に説明します。
マイグレーションアドバンテージ：小型、高速、総所有コストが低い、オープンソース。複数のオペレーティン...
自動ウェブページ更新と自動ジャンプのサンプルコード
ウェブページの自動更新: <head></head> の間に次のコードを追加...
Intelli Idea で Tomcat 設定が見つからない問題の解決方法
2日前に新しい会社に入社しました。その会社ではIntelli Ideaを使っています。Eclipse...
VMware 15 を使用して仮想マシンをインストールし、CentOS 8 を使用する詳細な手順
序文：現在、Linux と .Net Core を学習しており、クロスプラットフォームの知識を学んで...
Docker コンテナにデータベースをデプロイする場合の欠点は何ですか?
序文Docker は過去 2 年間で非常に人気が高まっています。開発者はすべてのアプリケーションとソ...
CentOS7.x のアンインストールとインストール MySQL5.7 の操作手順とエンコード形式の変更方法
1. MySQL 5.7 のアンインストール1.1查看yum是否安裝過mysql CD yum li...
Windows 8 での MySQL 5.6.15 のインストールと設定方法のグラフィック チュートリアル
MySQLは私がとても気に入っているデータベースです。今日はWindows 8システムでインストール...
Dockerfile をベースに Zabbix 監視システムのコード例を作成する
forループを使用してZabbixイメージをコンテナにインポートします。 n を `ls *.tar...
Vue で eslint 検出をオフにする方法 (複数の方法)
目次1. 問題の説明2. 問題解決1. 問題の説明Vue プロジェクトを開発する場合、作成時に誤って...
VMware15 centos7 ブリッジモード ssh に突然アクセスできなくなる問題を解決する
仮想マシンに独自の LAN IP を持たせたいので、テストを容易にするためにブリッジを使用します。 ...
JSでユーザーを追跡する方法
目次1. 同期AJAX 2. 非同期AJAX 3. ユーザーのクリックを追跡する4. リバウンドトラ...