Разработка - Обратный отчет до нового 2023 года

Пишем наш HTML:

HTML:

<body>
        <div class="box">
            <h1>New Year Countdown</h1>
            <div class="box_img">
                <img id="img" src="https://previews.123rf.com/images/meineurlaubswelt/meineurlaubswelt1711/meineurlaubswelt171100108/90949682-happy-new-year-2023.jpg" alt="building" />
            </div>
            <div class="time">
                <div class="days"></div>
                <div class="hours"></div>
                <div class="minutes"></div>
                <div class="seconds"></div>
            </div>
        </div>
  <script src='script.js'></script>
</body>

Пишем наш стиль:

CSS:

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box {
    width: 800px;
    height: 700px;
}

.box h1 {
    text-align: center;
    font-size: 40px;
    font-weight: 600;
    margin-top: 80px;
}

.box .box_img img {
    width: 100%;
}

.box .time {
    display: flex;
    justify-content: center;
    align-items: center;
}

.box .time div {
    width: 100px;
    height: 100px;
    background-color: rgba(33, 33, 78);
    margin: 0 30px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    font-weight: 600;
    border-radius: 10px;
    position: relative;
}

.box .time div::after {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    width: 100%;
    height: 210px;
    background-color: white;
    opacity: 0.15;
    transform: rotate(45deg);
}

.box .time div::before {
    content: 'Days';
    position: absolute;
    bottom: -50px;
    font-size: 25px;
    color: #333;
}

.box .time div:nth-child(1):before {
    content: 'Days';
}
.box .time div:nth-child(2):before {
    content: 'Hours';
}
.box .time div:nth-child(3):before {
    content: 'Minutes';
}
.box .time div:nth-child(4):before {
    content: 'Seconds';
}

Пишем js:

JavaScript:

    function showTime() {
                var targetDate = new Date('jan 1, 2023 00:00:00');
                var currentDate = new Date().getTime();
                var gap = targetDate - currentDate;

                var d = Math.floor(gap / 1000 / 60 / 60 / 24);
                var h = Math.floor((gap / 1000 / 60 / 60) % 24);
                var m = Math.floor(gap / 1000 / 60) % 60;
                var s = Math.floor(gap / 1000) % 60;

                if (d < 10) {
                    d = '0' + d;
                }
                if (h < 10) {
                    h = '0' + h;
                }
                if (m < 10) {
                    m = '0' + m;
                }
                if (s < 10) {
                    s = '0' + s;
                }

                document.querySelector('.days').innerHTML = d;
                document.querySelector('.hours').innerHTML = h;
                document.querySelector('.minutes').innerHTML = m;
                document.querySelector('.seconds').innerHTML = s;
            }
            setInterval(showTime, 1000);

И вот наша кульминация:

Реакции: mailo и hacker

Разработка Обратный отчет до нового 2023 года

Ещё ресурсы от baltun