この記事では、参考までに簡単なタイマーを実装するためのJavaScriptの具体的なコードを紹介します。具体的な内容は次のとおりです。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>タイマー</title> <スタイル> .bigDiv { マージン: 50px 自動; 幅: 200ピクセル; 高さ: 200px; 背景色: ライトスカイブルー; 境界線の半径: 10px; } #表示数 { 幅: 200ピクセル; 高さ: 20px; 背景色: オレンジ; テキストをすべて中央揃えにします。 境界線の半径: 5px; } </スタイル> </head> <本文> <div class="bigDiv"> <h2 align="center">タイマー</h2> <div id="showNum" align="center"> 0 </div> <br> <br> <div class="butDiv">     <button type="button" id="start">開始</button>   <button type="button" id="stop">停止</button>   <button type="button" id="reset">リセット</button>   </div> </div> <スクリプト> // 表示される時間を定義します。let int = null; /** * クリックイベントの開始 */ document.getElementById("start").addEventListener('click', 関数() { (int == null)の場合{ //タイマーを設定する//2ミリ秒ごとに実行する パラメーター1 int = setInterval(startNum, 1000); } }); /** * クリックイベントを停止 */ document.getElementById("stop").addEventListener('click', 関数() { // タイマーをクリアします。 クリア間隔(int); 整数 = null; }); /** * クリックイベントをリセット */ num = 0 とします。 document.getElementById("reset").addEventListener('click', 関数() { (int == null)の場合{ 数値 = 0; //時間を0に変更する document.getElementById("showNum").innerHTML = num; } }); 関数startNum() { 数値++; // 時間を継続的に変更します document.getElementById("showNum").innerHTML = num; } </スクリプト> </本文> </html> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL での replace と replace into の使い方の説明
Ubuntuの最新バージョンでは、ユーザーは中国語入力方法を別途ダウンロードする必要がなくなりました...
目次MySQL 8 の WITH クエリについて学ぶ1. 例3. 練習するMySQL 8 の WIT...
MySQL エスケープエスケープとは、エスケープ文字の本来の意味を意味します。エスケープ文字の目的は...
目次1. 小道具2..同期3.vモデル4.参照5. $emit/v-on 6. $attrs/$li...
質問はhttps://www.zhihu.com/question/440066129/answer...
1. アクセス頻度、同時接続、ダウンロード速度を制限するために使用されるモジュールと命令の概要ngx...
適用シナリオ: iframe ページにスクロール バーがなく、親ウィンドウにスクロール バーが表示さ...
1. システム環境[root@localhost ホーム]# cat /etc/redhat-re...
エラーシナリオcmd の mysql コマンドを使用して、学生情報テーブルにデータを追加します。デー...
Vueのシンプルなタイマーを参考にしてください。具体的な内容は以下のとおりです原理: setInte...
いわゆる才能(左脳と右脳)つまり、芸術的な才能があるかどうかは、人間の左脳と右脳の分業によって主に決...
この記事では、主要な CSS ウェブサイトで推奨されている 20 個の便利なルールとベスト プラクテ...
MySQLはレプリケーションフィルターを動的に変更します今日遭遇した問題についてお話しします。今日は...
この例では、jQuery を使用してマウス ドラッグ イメージ機能を実装します。まず、ラッパーを設定...
Mysql マスタースレーブ サービスの実装例を構成する### メインデータベースmy.cnfを構成...