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 の紹介
推薦する
iviewは動的なフォームとカスタム検証期間の重複を実装します
フォーム項目を動的に追加するiview の動的なフォーム追加は非常に簡単です。フォーム項目を配列に設...
@Font-face の基本的な使い方と、すべてのブラウザと互換性を持たせる方法
@Font-face 基本紹介: @font-face は、Web ページにカスタム フォントを表示...
jQueryはショッピングカート機能を実装します
この記事の例では、ショッピングカート機能を実装するためのjQueryの具体的なコードを参考までに共有...
Vue.js スタイルレイアウト Flutter ビジネス開発共通スキル
シャドウスタイルにおけるフラッターとCSSの対応UIによって指定されたCSSスタイル 幅: 75px...
nginx ベースのブラウザネゴシエーションキャッシュプロセスの詳細な説明
この記事は主に、nginx に基づいてブラウザネゴシエーションキャッシュを設定する詳細なプロセスを紹...
Vueのトグルボタンをクリックしてボタンを有効にし、無効にします。
実装方法は3つのステップに分かれています。テンプレートに 2 つのボタンを設定し、v-if と v-...
CSV、Excel、SQL ファイルを MySQL にインポートするためのヒント
1. csvファイルをインポートする次のコマンドを使用します。 1.mysql> infile...
vscode dockerプラグインのdocker.socket権限問題を解決する
解決策: システム内のすべての .vscode 関連プロセスを終了します (または、remote-s...
js+canvas でコードレイン効果を実現
この記事では、js+canvasコードの雨効果の具体的なコードを参考までに共有します。具体的な内...
MLSQLコンパイル時権限制御例の詳細な説明
序文MySQL の権限を簡単に理解すると、MySQL では自分の能力の範囲内で操作が許可され、その限...
Web2.0製品と機能の簡単な紹介
<br />Web2.0とは何ですか？ Web2.0にはソーシャルネットワーク製品とその...
MySQL ルートパスワードエラー番号 1045 の解決方法
MySQLサービスを停止するWindowsでは、マイコンピュータを右クリック--管理--サービスと...
MySQL 5.7.21 winx64 無料インストールバージョン設定方法グラフィックチュートリアル
MySQL 5.7.21 winx64無料インストールバージョンの設定方法、参考までに、具体的な内容...
JSに関する7つの面接の質問、あなたはいくつ正しく答えられますか
序文JavaScript では、これは関数呼び出しコンテキストです。この動作が非常に複雑であるからこ...
コメント付きのスネークゲームを実装する js
この記事の例では、スネークゲームを実装するためのjsの具体的なコードを参考までに共有しています。具体...