Ngày hôm nay chúng ta sẽ đi vào tìm hiểu cách tạo countdown timer để đếm số ngày còn lại mà ta cần phải chờ để đón năm mới theo lịch âm bằng cách sử dụng HTML CSS và Javascript nhé!
Tạo Cấu Trúc File HTML Cho Countdown Timer
Phần đầu tiên chúng ta sẽ đi vào tạo hai file là index.html(nơi lưu trữ HTML) và style.css(nơi lưu trữ mã CSS). Sau đó liên kết chúng với Google Font thông qua đoạn mã dưới đây nhé:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bộ Đếm Thời Gian</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
</body>
</html>
Thêm Các Phần Tử HTML Cho Countdown Timer
Trong phần này chúng ta sẽ đi vào thêm các phần tử HTML cần thiết để tạo bộ đếm ngược thời gian cho năm mới 2021 bằng đoạn mã sau đây nha:
<div class="container">
<h2><span>Hãy Cùng Nhau Đếm Ngược Đến Năm</span> 2021</h2>
<div class="countdown">
<div id="day"></div>
<div id="hour"></div>
<div id="minute"></div>
<div id="second"></div>
</div>
</div>
Thiết Kế Giao Diện Cho Coundown Timer
Phần tiếp theo chúng ta sẽ đi vào thiết lập font, ảnh nền, vị trí... cho div .container (nơi chứa countdown timer) bằng các thuộc tính CSS được viết ở đoạn code bên dưới nhé!
CSS
*{
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
body{
background: #000 url(https://images.unsplash.com/photo-1588392382834-a891154bca4d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1589&q=80);
background-attachment: fixed;
background-blend-mode: hard-light;
}
.container{
position: absolute;
top: 80px;
left: 100px;
right: 100px;
bottom: 80px;
background: url(https://images.unsplash.com/photo-1588392382834-a891154bca4d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1589&q=80);
background-attachment: fixed;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
box-shadow: 0 1px 1px rgba(0,0,0,0.12),
0 2px 2px rgba(0,0,0,0.12),
0 4px 4px rgba(0,0,0,0.12),
0 8px 8px rgba(0,0,0,0.12),
0 16px 16px rgba(0,0,0,0.12);
}
Và để xem kết quả của đoạn mã trên thì bạn nhìn hình bên dưới nha.
Thiết Lập CSS Cho Nội Dung Countdown Timer
Trong phần này chúng ta sẽ đi vào thiết lập style CSS cho các thành phần nội dung countdown timer new year bằng đoạn mã dưới đây nha:
CSS
.container h2{
text-align: center;
font-size: 10em;
line-height: 0.7em;
color: #fff;
margin-top: -80px;
}
.container h2 span{
display: block;
letter-spacing: 6px;
font-size: 0.2em;
}
.countdown{
display: flex;
margin-top: 50px;
}
.countdown div{
position: relative;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background: #333;
color: #fff;
margin: 0 15px;
font-size: 3em;
box-shadow: 0 1px 1px rgba(0,0,0,0.12),
0 2px 2px rgba(0,0,0,0.12),
0 4px 4px rgba(0,0,0,0.12),
0 8px 8px rgba(0,0,0,0.12),
0 16px 16px rgba(0,0,0,0.12);
}
Và kết quả bạn xem hình ảnh bên dưới nhé!
Các ô màu xám sẽ là nơi chứa thông tin về thời gian còn lại khi đến tết âm lịch(ngày, giờ, phút, giây) mà chúng ta tính toán và hiển thị thông tin bằng cách sử dụng Javascript nhé!
Thiết Kế Phần Chú Thích Cho Countdown Timer
Reong phần này chúng ta sẽ sử dụng thuộc tính :before trong CSS để tạo chú thích cho count down timer thông qua đoạn code bên dưới nhé:
CSS
.countdown div:before{
content: "";
position: absolute;
bottom: -30px;
left: 0;
width: 100%;
height: 50px;
background: #1E90FF;
color: #dddddd;
font-size: 0.35em;
line-height: 35px;
}
.countdown #day:before{
content: 'Ngày';
}
.countdown #hour:before{
content: 'Giờ';
}
.countdown #minute:before{
content: 'Phút';
}
.countdown #second:before{
content: 'Giây';
}
Và kết quả bạn xem bên dưới nhé:
Thiết Lập Javascript Để Countdown Timer Hoạt Động
Bước này chúng ta sẽ đi vào sử dụng Date trong Javascript để tính toán thời gian còn lại khi đến tết âm lịch thông qua đoạn mã sau nhé:
Javascript
/*Lấy thời gian tết âm lịch (mily giây)*/
var tetAmLich = new Date(2021, 1, 12, 0, 0, 0).getTime();
function newYear() {
/*Lấy thời gian ngày hiện tại (mily giây) */
var ngayHienTai = new Date().getTime();
/*Tính thời gian còn lại (mily giây) */
thoigianConLai = tetAmLich - ngayHienTai;
/*Chuyển đơn vị thời gian tương ứng sang mili giây*/
var giay = 1000;
var phut = giay * 60;
var gio = phut * 60;
var ngay = gio * 24;
/*Tìm ra thời gian theo ngày, giờ, phút giây còn lại thông qua cách chia lấy dư(%) và làm tròn số(Math.floor) trong Javascript*/
var d = Math.floor(thoigianConLai / (ngay));
var h = Math.floor((thoigianConLai % (ngay)) / (gio));
var m = Math.floor((thoigianConLai % (gio)) / (phut));
var s = Math.floor((thoigianConLai % (phut)) / (giay));
/*Hiển thị kết quả ra các thẻ Div với ID tương ứng*/
document.getElementById("day").innerText = d;
document.getElementById("hour").innerText = h;
document.getElementById("minute").innerText = m;
document.getElementById("second").innerText = s;
}
/*Thiết Lập hàm sẽ tự động chạy lại sau 1s*/
setInterval(function () {
newYear()
}, 1000)
Và kết quả cuối cùng bạn xem video dưới đây nhé:
Nếu bạn muốn tìm hiểu thêm về Date trong Javascript thì có thể tham khảo đường dẫn bên dưới nhé!
Còn dưới đâ là dự án trên Codepen nhé!
See the Pen Countdown Timer New Year by haycuoilennao19 (@haycuoilennao19) on CodePen.
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn cách tạo countdown timer new year hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!