Javascript Turorial App - CountDown Times

Ứng dụng Javascipt App đếm ngược thời gian tới năm mới.

File Index.html


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Countdown Timer</title>
        <link rel="stylesheet" href="style.css" />
        <script src="script.js" defer></script>
    </head>
    <body>
        <h1>New Years Eve</h1>

        <div class="countdown-container">
            <div class="countdown-el days-c">
                <p class="big-text" id="days">0</p>
                <span>days</span>
            </div>
            <div class="countdown-el hours-c">
                <p class="big-text" id="hours">0</p>
                <span>hours</span>
            </div>
            <div class="countdown-el mins-c">
                <p class="big-text" id="mins">0</p>
                <span>mins</span>
            </div>
            <div class="countdown-el seconds-c">
                <p class="big-text" id="seconds">0</p>
                <span>seconds</span>
            </div>
        </div>
    </body>
</html>

File Style.css

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap");

* {
    box-sizing: border-box;
}

body {
    background-image: url("./snow.jpg");
    background-size: cover;
    background-position: center center;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    font-family: "Poppins", sans-serif;
    margin: 0;
}

h1 {
    font-weight: normal;
    font-size: 4rem;
    margin-top: 5rem;
}

.countdown-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.big-text {
    font-weight: bold;
    font-size: 6rem;
    line-height: 1;
    margin: 1rem 2rem;
}

.countdown-el {
    text-align: center;
}

.countdown-el span {
    font-size: 1.3rem;
}

File App.js

const daysEl = document.getElementById("days");
const hoursEl = document.getElementById("hours");
const minsEl = document.getElementById("mins");
const secondsEl = document.getElementById("seconds");

const newYears = "1 Jan 2021";

function countdown() {
    const newYearsDate = new Date(newYears);
    const currentDate = new Date();

    const totalSeconds = (newYearsDate - currentDate) / 1000;

    const days = Math.floor(totalSeconds / 3600 / 24);
    const hours = Math.floor(totalSeconds / 3600) % 24;
    const mins = Math.floor(totalSeconds / 60) % 60;
    const seconds = Math.floor(totalSeconds) % 60;

    daysEl.innerHTML = days;
    hoursEl.innerHTML = formatTime(hours);
    minsEl.innerHTML = formatTime(mins);
    secondsEl.innerHTML = formatTime(seconds);
}

function formatTime(time) {
    return time < 10 ? `0${time}` : time;
}

// initial call
countdown();

setInterval(countdown, 1000);

Javascript Turorial App - CountDown Times

Ứng dụng Javascipt App đếm ngược thời gian tới năm mới.

Các bài học liên quan

Đóng góp ý kiến của bạn về bài học để admin liên hệ hoặc giúp nhé

Dịch vụ chúng tôi cung cấp

Blogs Kiến thức

CÔNG TY THIẾT KẾ WEBSITE CHUYÊN NGHIỆP

CÔNG TY THIẾT KẾ WEBEXTRASITE.COM