JavaScript でシンプルなタイマーを実装する
|
この記事では、参考までに簡単なタイマーを実装するための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 の使い方の説明
推薦する
Zookeeper&Kafka クラスターを構築するための Docker の実装
最近Kafka勉強しています。クラスタの状態をテストする準備をしていたときに、仮想マシンを 3 つ開...
CSS を使用して物流の進行状況のスタイルを実装するためのサンプルコード
効果： CSS スタイル: <スタイル タイプ="text/css">...
ViteでReactプロジェクトを構築する方法
目次序文Viteプロジェクトを作成する改修プロジェクトディレクトリの規則その他の構成序文毎日鳩、火ば...
React+Koa によるファイルアップロードの実装例
目次背景サーバーの依存関係バックエンド構成クロスドメインバックエンド構成の静的リソースアクセスではk...
react-navigation6.xルーティングライブラリの基本的な使い方の詳しい説明
目次react-nativeプロジェクトの初期化react-nativeプロジェクトをインストールす...
Dockerコンテナの原理の分析
目次01 コンテナの本質とは何か？ 02 Cgroupテクノロジーと名前空間テクノロジーの概要03 ...
MySQL スロークエリ pt-query-digest スロークエリログの分析
1. はじめにpt-query-digest は、MySQL のスロー クエリを分析するためのツール...
ラジオボタンとチェックボックス効果の純粋な CSS 実装例
ラジオボタンとチェックボックスラジオボタンとチェックボックスの効果を実現するための純粋な CSSラジ...
jsフェッチ非同期リクエストの使用の詳細な例
目次非同期を理解するフェッチ(url)レスポンス.json() asyncとawaitを組み合わせる...
Nginx アップロードファイルのサイズを変更する簡単な方法
オリジナルリンク: https://vien.tech/article/138序文私は、マークダウン...
Vueコンポーネントのルーティング強調表示問題の解決策
序文以前は、キャッシュを使用してルートを強調表示していました。すべてのルートをトラバースし、クリック...
Dockerを使用して外部からアクセス可能なMySQLを構築する詳細な説明
MySQL 8.0をインストールする docker run -p 63306:3306 -e MYS...
この記事はJavaScriptの変数とデータ型を理解するのに役立ちます
目次序文：親切なヒント:変数1. 免責事項2. 譲渡3. 2つの小さな文法上の詳細変数の命名規則なぜ...
JavaScript でプライベート変数を宣言する 2 つの方法
序文JavaScript は、キーワードを使用してプライベート変数を宣言できる他の言語とは異なります...
CSS 位置プロパティが絶対の場合のパーセンテージ値の計算
位置が絶対の場合、関連する属性のパーセンテージは、参照先の要素 (包含ブロック) を基準として計算さ...