ホームページ >ウェブフロントエンド >CSSチュートリアル >Html、Css、JavaScriptでタイマーカウンターを作成する方法。
Html、Css、JavaScriptでタイマーカウンターを作成する方法。
- Mary-Kate Olsenオリジナル
- 2024-10-10 11:13:301147ブラウズ
タイマー カウンターの構築は、HTML、CSS、JavaScript 間の相互作用を理解するための優れた方法です。この投稿では、ユーザーがボタンをクリックしたときにカウントを開始する単純なタイマーを作成するプロセスを説明します。タイマーには経過時間が時間、分、秒で表示されます。
ステップ 1: HTML 構造
まず、基本的な HTML 構造を作成します。タイマーを表示するには div と、タイマーを開始するにはボタンが必要です。以下に例を示します:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Timer Counter</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Timer Counter</h1>
<div id="timer">00:00:00</div>
<button id="startButton">Start Timer</button>
</div>
<script src="script.js"></script>
</body>
</html>
この HTML ファイル内:
タイマーの表示には、id="timer" の div が使用されます。
id="開始ボタン" のボタンはタイマーを開始するために使用されます。
ステップ 2: CSS スタイル
次に、HTML 要素のスタイルを設定して、視覚的に魅力的なインターフェイスを作成します。お好みに合わせて自由にスタイリングしてください。
/* styles.css */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
text-align: center;
}
#timer {
font-size: 3rem;
margin-bottom: 20px;
}
button {
padding: 10px 20px;
font-size: 1rem;
cursor: pointer;
}
この CSS ファイル:
コンテンツを垂直方向と水平方向の両方で中央揃えにします。
大きなフォント サイズでタイマー表示のスタイルを設定します。
ボタンにパディングとスタイルを追加して、クリックしやすくします。
ステップ 3: JavaScript ロジック
最後に、タイマー機能を処理するための JavaScript を追加します。これには、タイマーの開始、毎秒の更新、経過時間の表示が含まれます。
// script.js
document.addEventListener("DOMContentLoaded", () => {
const startButton = document.getElementById("startButton");
const timerDisplay = document.getElementById("timer");
let timerInterval;
let startTime;
function startTimer() {
startTime = new Date();
timerInterval = setInterval(updateTimer, 1000);
}
function updateTimer() {
const currentTime = new Date();
const elapsedTime = new Date(currentTime - startTime);
const hours = String(elapsedTime.getUTCHours()).padStart(2, '0');
const minutes = String(elapsedTime.getUTCMinutes()).padStart(2, '0');
const seconds = String(elapsedTime.getUTCSeconds()).padStart(2, '0');
timerDisplay.textContent = `${hours}:${minutes}:${seconds}`;
}
startButton.addEventListener("click", startTimer);
});
この JavaScript ファイル:
実行する前に DOM がロードされるのを待ちます。
開始時刻を初期化し、
を設定する startTimer 関数を定義します。 タイマーを毎秒更新する間隔。経過時間を計算するための updateTimer 関数を定義します (
形式)
それを実行し、タイマー表示を更新します。
ボタンにイベント リスナーを追加し、クリックされたときにタイマーを開始します。
ボーナス:
スタートボタンを非表示にし、ストップボタンのスクリプトを表示します
// script.js
document.addEventListener("DOMContentLoaded", () => {
const startButton = document.getElementById("startButton");
const stopButton = document.getElementById("stopButton");
const timerDisplay = document.getElementById("timer");
let timerInterval;
let startTime;
function startTimer() {
startTime = new Date();
timerInterval = setInterval(updateTimer, 1000);
startButton.style.display = "none";
stopButton.style.display = "inline-block";
}
function stopTimer() {
clearInterval(timerInterval);
startButton.style.display = "inline-block";
stopButton.style.display = "none";
}
function updateTimer() {
const currentTime = new Date();
const elapsedTime = new Date(currentTime - startTime);
const hours = String(elapsedTime.getUTCHours()).padStart(2, '0');
const minutes = String(elapsedTime.getUTCMinutes()).padStart(2, '0');
const seconds = String(elapsedTime.getUTCSeconds()).padStart(2, '0');
timerDisplay.textContent = `${hours}:${minutes}:${seconds}`;
}
startButton.addEventListener("click", startTimer);
stopButton.addEventListener("click", stopTimer);
});
以上がHtml、Css、JavaScriptでタイマーカウンターを作成する方法。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。