如何使用 Html、Css 和 Javascript 建立計時器計數器。
- Mary-Kate Olsen原創
- 2024-10-10 11:13:301148瀏覽
建立計時器計數器是理解 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=「start Button」的按鈕用於啟動計時器。
第 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中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn