简单的新年倒计时

Mayenne600

已于 2022-12-04 18:46:38 修改

阅读量534

点赞数

文章标签： css css3 html javascript

于 2022-12-04 18:41:32 首次发布

本文链接：https://blog.csdn.net/Mayenne/article/details/128175424

版权

效果图

思路

借鉴了GitHub上新年倒计时的实现方法，同时给‘new year countdown’做了一个视觉变换的效果（也是用JS实现的）

1.HTML部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时</title>
</head>
<body>
    
    <div class="background">New Year Countdown
    <div id="countdown" class="countdown">
        <div class="time">
            <h2 id="days">00</h2>
            <small>days</small>
        </div>
        <div class="time">
            <h2 id="hours">00</h2>
            <small>hours</small>
        </div>
        <div class="time">
            <h2 id="minutes">00</h2>
            <small>minutes</small>
        </div>
        <div class="time">
            <h2 id="seconds">00</h2>
            <small>seconds</small>
            </div>
        <div id="year" class="year"></div>
    </div></div>
</body>

</html>

2.CSS部分

body {
            margin: 0;
            padding: 0;
            height: 200vh;
            overflow-x: hidden;
            background-repeat: repeat;

        }

        .background {
            background-image: url("thumb_1680_0_20201028105748891.jpg");
            background-size: cover;
            background-position: 50% 50%;
            position: absolute;
            top: 0;
            height: 200vh;
            font: 500 150px '';
            padding-top: 800px;
            line-height: 100px;
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            position: relative;
            text-align: center;
            overflow: hidden;
        }


        .background::before {
            content: '';
            background-size: cover;
            background-image: inherit;
            background-position: 50% 50%;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            z-index: -99;
        }

        .year {
            font-size: 200px;
            z-index: -1;
            opacity: 0.2;
            position: relative;
            top: 250px;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
        }

        .countdown {
            display: block;
            width: 100%;
            height: 300px;
            z-index: 9999;
            position: relative;
            top: 100px;
            -webkit-text-fill-color: rgb(171, 109, 177);

        }

        .time {
            display: block;
            margin: 100px;
            height: 30px;
            font-size: 55px;
            float: left;
            padding-left: 50px;

        }

        .time h2 {
            margin: 0 0 5px;
        }

3.JS部分

const background = document.querySelector(".background")

        document.addEventListener('scroll', () => {
            const scrollY = window.scrollY

            if (scrollY !== 0) {
                background.style.backgroundPosition = `calc(50% + ${scrollY}px) calc(50% + ${scrollY}px)`
            } else {
                background.style.backgroundPosition = ''
            }
        })
        const days = document.getElementById('days');
        const hours = document.getElementById('hours');
        const minutes = document.getElementById('minutes');
        const seconds = document.getElementById('seconds');
        const countdown = document.getElementById('countdown');
        const year = document.getElementById('year');
        const loading = document.getElementById('loading');

        const currentYear = new Date().getFullYear();

        const newYearTime = new Date(`January 01 ${currentYear + 1} 00:00:00`);
        year.innerText = currentYear + 1;

        
        function updateCountdown() {
            const currentTime = new Date();
            const diff = newYearTime - currentTime;

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

           
            days.innerHTML = d;
            hours.innerHTML = h < 10 ? '0' + h : h;
            minutes.innerHTML = m < 10 ? '0' + m : m;
            seconds.innerHTML = s < 10 ? '0' + s : s;
        }

      
        setInterval(updateCountdown, 1000);