Chia sẻ code countdown to 2022 cho bạn nào cần

Bạn nào có nhu cầu muốn làm một trang web đơn giản để đếm ngược ngày đến Tết 2022, countdown sự kiện nào đó hoặc đơn giản là muốn tích hợp countdown to 2022 vào website của mình nhưng chưa biết cách thì hãy đọc bài viết sau nhé.

Hướng dẫn cơ bản làm trang web countdown to 2022

1. Chuẩn bị

Bạn cần tải cho mình một công cụ Editor code bất kỳ như là Notepad++, Sublime text ...

Tải Notepad++ tại đây: https://notepad-plus-plus.org/downloads/

Tải Sublime text tại đây: https://www.sublimetext.com/download

Sau khi tải công cụ Editor code thì bạn hãy cài đặt như bình thường. Sau khi cài đặt xong thì bạn mở công cụ Editor lên và copy đoạn code ở dưới đây:

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>
<body>

<div id="countdown">
    <h3 id="title">ĐẾM NGƯỢC ĐẾN TẾT NGUYÊN ĐÁN 2022</h3>
    <ul>
        <li><span id="days">...</span>Ngày</li>
        <li><span id="hours">...</span>Giờ</li>
        <li><span id="minutes">...</span>Phút</li>
        <li><span id="seconds">...</span>Giây</li>
    </ul>
</div>
<style>
    #countdown h3 {
        text-align: center;
    }

    #countdown ul {
        text-align: center;
    }

    #countdown li {
        display: inline-block;
        font-size: 18px;
        text-align: center;
        list-style-type: none;
        padding: 1em;
        text-transform: capitalize;
        margin-left: 0% !important;
    }

    #countdown li span {
        display: block;
        font-size: 30px;
        font-weight: 700;
        width: 80px;
        height: 80px;
        line-height: 80px;
        border: 3px solid #ffee0a;
        background-color: #ffee0a;
        color: #620606;
        border-radius: 50%;
        margin-bottom: 15px;
    }
</style>
<script>
    // Đặt ngày đếm ngược, ở đây mình đặt ngày đếm ngược là 01/02/2022
    //February: Tháng hai, 01: Ngày, 2022: Năm, 00:00:00 or 24:00:00 thời gian của ngày đếm ngược
    var countDownDate = new Date("February 01, 2022 00:00:00").getTime();

    // setInterval: Cập nhật đếm ngược sau mỗi 1 giây.
    // 1000: 1 giây
    var x = setInterval(function () {

        // Ngày và giờ hôm nay
        var now = new Date().getTime();

        // Làm phép tính để đếm khoảng cách ngày hôm nay và ngày đếm ngược
        var distance = countDownDate - now;

        // Tính toán thời gian cho ngày, giờ, phút và giây
        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);

        document.getElementById("days").innerText = days,
        document.getElementById("hours").innerText = hours,
        document.getElementById("minutes").innerText = minutes,
        document.getElementById("seconds").innerText = seconds

        // Nếu kết thúc quá trình đếm ngược thì in ra thông báo gì đó
        if (distance < 0) {
            clearInterval(x);
            document.getElementById("title").innerHTML = "CHÚC MỪNG NĂM MỚI";
            document.getElementById("days").innerText = 0,
            document.getElementById("hours").innerText = 0,
            document.getElementById("minutes").innerText = 0,
            document.getElementById("seconds").innerText = 0
        }
    }, 1000);
</script>
</body>
</html>

 

2. Chạy demo

Sau khi copy code dán vào công cụ Editor thì bạn có thể chỉnh sửa tuỳ biến theo nhu cầu của bạn, bạn nào biết HTML, CSS thì có thể chỉnh sửa lại giao diện để trông đẹp hơn. 

Khi nào bạn chỉnh sửa code tuỳ biến xong thì có thể lưu lại thành tập tin index.html rồi mở file đó lên bằng trình duyệt web, bạn sẽ nhìn thấy trang web tĩnh countdown.

Đoạn code countdown ở trên mình đã comment một số chổ để giải thích cho bạn dể hiểu, bạn có thể đọc và tự sửa theo nhu cầu của bạn.

Lưu ý bạn nào muốn nhúng code vào website của mình thì copy đoạn code trong thẻ body thôi nhé.

Link demo: ĐẾM NGƯỢC ĐẾN TẾT NGUYÊN ĐÁN 2022

Bài viết nên đọc

Trên đây là những kiến thức từ kinh nghiệm bản thân mình nên các bạn có thể tham khảo. Nếu các bạn có góp ý cho mình thì hãy gửi vào đây, mình sẵn sàng nhận ý kiến đóng góp từ các bạn.

Ngoc Phuong

Ngoc Phuong - 82 bài viết - Đánh giá:

Có 2 cách học hiệu quả nhất, 1 là nói cho người khác biết thứ bạn mới học được, 2 là nói cho người khác biết thứ bạn sắp quên. Tôi mới học được rất nhiều thứ. Tôi cũng sắp quên rất nhiều thứ.

Để lại bình luận

Địa chỉ email của bạn sẽ không được công khai