この記事では、参考までに簡単なタイマーを実装するための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 の使い方の説明
前回の記事では、ボタンをクリックしてファイルをダウンロードするVueの機能を紹介しました。今日は、ボ...
序文リアルタイムのデータベース バックアップの必要性は非常に一般的です。MySQL 自体はレプリケー...
序文プロジェクトの要件は、ユーザーの現在の位置が特定の地理的位置範囲内にあるかどうかを判断することで...
#docker ps チェック、すべてのポートがマップされています コンテナID イメージ コマンド...
背景AWS EC2 を使用するプロジェクトサービスがあります。セキュリティとパフォーマンスを考慮して...
序文テーブルを削除するには、無意識に思い浮かぶコマンドは、DROP TABLE "テーブル...
この記事では、CSS フロートの特徴を紹介します。皆さんと共有し、自分用のメモとして残したいと思いま...
I. はじめにDockerテクノロジーは現在非常に人気があります。コンテナを介してプロジェクト環境を...
目次WXS レスポンス イベントプランAページ構造とスタイルWXS イベントコールバック関数WXS ...
この記事の環境はWindows 10、MySQLのバージョンは5.7.12-logです1. 基本的な...
この記事の例では、参考までに、シンプルなショッピングカートモジュールを実装するためのjsの具体的なコ...
シナリオ: ページAがページBを開くと、ページBで操作した後、ページAは変更されたデータを同期する必...
目次ログインビジネスプロセスログイン機能の実装要約するまず、エフェクトの実装プロセスを見てみましょう...
目次序文1. Axiosの紹介2. HTTPインターセプターの設計と実装2.1 インターセプターの紹...
この記事では、Vueカウンターの簡単な実装コードを例として紹介します。具体的な内容は以下のとおりです...