Hướng Dẫn Tạo Đồng Hồ Đếm Ngược Đơn Giản Bằng HTML, CSS và JavaScript
Bạn đã bao giờ muốn tạo ra một đồng hồ đếm ngược đơn giản trên trang web của mình chưa? Việc này không chỉ thú vị mà còn giúp bạn hiểu rõ hơn về cách thức hoạt động của HTML, CSS và JavaScript. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn từng bước để xây dựng một bộ đếm thời gian đơn giản, bắt đầu đếm từ khi người dùng nhấp vào nút. Đồng hồ sẽ hiển thị thời gian đã trôi qua theo định dạng giờ, phút và giây.
1. Cấu Trúc Của HTML
Để bắt đầu, chúng ta cần một cấu trúc HTML cơ bản để hiển thị đồng hồ đếm ngược. Hãy sử dụng thẻ "div" để hiện thị đồng hồ và một nút "button" để người dùng có thể khởi chạy bộ đếm thời gian. Dưới đây là một mẫu mã HTML:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Đồng Hồ Đếm Ngược</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Đồng Hồ Đếm Ngược</h1>
<div id="timer">00:00:00</div>
<button id="startButton">Bắt Đầu Đếm Thời Gian</button>
</div>
<script src="script.js"></script>
</body>
</html>Trong đoạn mã trên, thẻ "div" với id="timer" sẽ hiển thị đồng hồ, và thẻ "button" với id="startButton" sẽ được sử dụng để bắt đầu đồng hồ đếm.
2. Tạo Kiểu CSS Cho Đồng Hồ
Tiếp theo, chúng ta sẽ tạo kiểu cho đồng hồ bằng CSS. Bạn có thể tự do thiết kế giao diện theo sở thích cá nhân. Dưới đây là một ví dụ về mã CSS mà bạn có thể tham khảo:
css
/* 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;
}Mã CSS này sẽ giúp căn giữa toàn bộ nội dung, tạo kiểu cho đồng hồ với cỡ chữ lớn và thêm phần đệm cho nút nhấn để tạo cảm giác dễ chịu cho người dùng.
3. Thêm Chức Năng Với JavaScript
Cuối cùng, chúng ta sẽ thêm JavaScript để xử lý chức năng của đồng hồ. Mã JavaScript sẽ thực hiện khởi động đồng hồ khi người dùng nhấp vào nút "Bắt Đầu", cập nhật thời gian mỗi giây và hiển thị thời gian đã trôi qua. Đây là mã JavaScript bạn cần:
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);
});Mã JavaScript này sẽ chờ cho đến khi DOM được tải xong, sau đó thiết lập hàm "startTimer" để khởi tạo thời gian bắt đầu và định kỳ cập nhật đồng hồ mỗi giây. Hàm "updateTimer" sẽ tính toán thời gian đã trôi qua, định dạng và cập nhật hiển thị trên đồng hồ. Cuối cùng, chúng ta thêm một sự kiện lắng nghe cho nút để khởi động đồng hồ khi người dùng nhấp vào.
Ngoài ra, nếu bạn muốn có thể ẩn nút "Bắt Đầu" và hiển thị nút "Dừng", bạn có thể thêm mã sau vào JavaScript:
javascript
// script.js
document.addEventListener("DOMContentLoaded", () => {
const startButton = document.getElementById("startButton");
const stopButton = document.createElement("button");
stopButton.textContent = "Dừng Đếm Thời Gian";
stopButton.style.display = "none";
document.querySelector(".container").appendChild(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);
});Hy vọng rằng bài hướng dẫn này không chỉ giúp bạn tạo ra một đồng hồ đếm ngược đơn giản mà còn cung cấp cho bạn cái nhìn sâu sắc về cách kết hợp HTML, CSS và JavaScript để tạo ra các tương tác thú vị trên trang web của bạn.
source: viblo
