Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Cách Tạo Coundown Timer New Year CSS Javascript

Cách Tạo Coundown Timer New Year CSS Javascript


Ngày 26 Tháng 1 Năm 2021

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.

Countdown timer new year 1

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é!

Countdown timer new year 2

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é:

Countdown timer new year 3

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é!

Date Javascript

Còn dưới đâ là dự án trên Codepen nhé!

See the Pen Countdown Timer New Year by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

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ẻ!

Load WooCommerce Stores in 249ms!