Sắp tới sinh nhật crush nhưng bạn lại sợ quên, chúng ta hãy tạo ra một đồng hồ đếm ngược bằng JavaScript nhé. Hãy chuẩn bị sẵn năng lượng tích cực và cùng bắt đầu nào!
Đầu tiên, hãy tạo một trang HTML mới và dán mã HTML và JavaScript bên dưới vào:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
text-align: center;
font-size: 60px;
margin-top: 0px;
}
</style>
</head>
<body>
<p id="demo"></p>
<script>
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2024 15:37:25").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
</body>
</html>Giờ thì hãy cùng xem xét code này:
<p id="demo"></p>Chúng ta sẽ sử dụng element này để hiển thị kết quả đếm ngược của chúng ta.
var countDownDate = new Date("Jan 5, 2024 15:37:25").getTime();Chúng ta khai báo biến countDownDate và gán cho nó giá trị là thời gian mà chúng ta muốn đếm ngược tới. Trong ví dụ này, chúng ta đã chọn ngày đếm ngược là “Jan 5, 2024 15:37:25”. (tức là ngày 5 tháng 1 năm 2024 lúc 15 giờ 37 phút 25 giây)
var x = setInterval(function() {
// Các tính toán và cập nhật giá trị đếm ngược sẽ được thực hiện ở đây
}, 1000);Chúng ta tạo một hàm setInterval sẽ được gọi mỗi 1 giây (1000 mili giây). Đây là nơi chúng ta sẽ thực hiện các phép tính và cập nhật giá trị đếm ngược.
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);Các dòng trên tính toán thời gian còn lại (distance) dựa trên thời điểm hiện tại và thời điểm đếm ngược được đặt trước đó. Chúng ta sẽ tính toán số ngày, giờ, phút và giây dựa trên khoảng cách này.
document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";Dòng trên cập nhật nội dung của phần tử có id “demo” để hiển thị kết quả đếm ngược của chúng ta. Kết quả sẽ có dạng “X ngày Y giờ Z phút T giây”.
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}Đoạn mã trên kiểm tra xem thời gian đếm ngược đã kết thúc chưa. Nếu đã kết thúc, nó sẽ dừng đồng hồ đếm ngược và hiển thị thông báo “EXPIRED”.
Vậy là chúng ta đã tạo xong một đồng hồ đếm ngược! Hãy tùy chỉnh giá trị của biến countDownDate để đếm ngược đến thời điểm mà bạn muốn. Bạn cũng có thể thay đổi giao diện của đồng hồ bằng cách chỉnh sửa CSS.
Hy vọng bạn đã thích thú với bài hướng dẫn này! Hãy thử tạo ra những đồng hồ đếm ngược độc đáo và chia sẻ niềm vui của bạn với chúng tôi!
See the Pen Untitled by minhchau (@ngocminhxx) on CodePen.