新年倒计时 js案例

最新推荐文章于 2024-07-17 10:13:54 发布
A-linWeb
最新推荐文章于 2024-07-17 10:13:54 发布
阅读量909
点赞数 2
CC 4.0 BY-SA版权
文章标签： css javascript
本文链接：https://blog.csdn.net/qq_48046110/article/details/107735331
因为是进阶版我就不过多解释小白可以看我做的小米秒杀倒计时里面有详细的讲解
代码如下
!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新年倒计时</title>
    <style>
        html {
            height: 100%;
        }

        body {
            margin: 0;
            background-image: url(img/timg.jpg);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            height: 100%;
        }

        .countdown {
            width: 900px;
            height: 160px;
            border: 1px solid #def;
            border-radius: 4px;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            color: #fff;
            padding: 30px;
            text-align: center;
            font-family: 宋体;
        }

        .countdown h2 {
            margin: 0;
            margin-bottom: 20px;
            font-size: 80px;
        }

        .countdown .time {

            font-size: 0;
            ;
        }

        .countdown .time span {
            font-size: 40px;
        }
    </style>
</head>

<body>
    <div class="countdown">
        <h2>新年倒计时</h2>
        <div class="time">
            <span>距离</span>
            <span class="toyear">2032-10-01</span>
            <span>还剩</span>
            <span class="year">01</span>
            <span>年</span>
            <span class="month">02</span>
            <span>月</span>
            <span class="date">05</span>
            <span>天</span>
            <span class="hour">06</span>
            <span>时</span>
            <span class="minute">06</span>
            <span>分</span>
            <span class="second">06</span>
            <span>秒</span>
        </div>
    </div>

    <script>
        var toyear = document.getElementsByClassName('toyear')[0];
        var year = document.getElementsByClassName('year')[0];
        var month = document.getElementsByClassName('month')[0];
        var date = document.getElementsByClassName('date')[0];
        var hour = document.getElementsByClassName('hour')[0];
        var minute = document.getElementsByClassName('minute')[0];
        var second = document.getElementsByClassName('second')[0];

        // 判断是否是闰年, 公历平年365天,闰年366天
        function isLeapYear(year) {
            // 年号能被4整除且不能被100整除，或者能被400整除的为闰年
            if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
                return true;
            } else {
                return false;
            }
        }

        // 求两个年份之间平均每年多少天  和 平均每月多少天。
        function average(startYear, endYear) {
            // 存储两个年份之间的总天数
            var sum = 0;
            // 两个年份之间的总年数
            var totalYearCount = (endYear - startYear + 1);
            for (let i = startYear; i <= endYear; i++) {
                sum += isLeapYear(i) ? 366 : 365;
            }
            // 得到平均值
            var result = {
                yearDay: sum / totalYearCount,
                monthDay: sum / totalYearCount / 12
            };
            console.log(result);
            return result;
        }

        // 功能：显示倒计时。形参ty表示截止到哪一年。
        function showDateInfo(ty) {
            if (ty instanceof Date) {
                // 截止的年
                var y = ty.getFullYear();
                // 截止的月
                var M = (ty.getMonth() + 1) < 10 ? '0' + (ty.getMonth() + 1) : (ty.getMonth() + 1).toString();
                // 截止的日
                var d = ty.getDate() < 10 ? '0' + ty.getDate() : ty.getDate().toString();
                // 当前日期
                var now = new Date();
                // 当前日期的毫秒数  getTime(), Date.now()
                var nowMS = now.getTime();
                // 截止日期的毫秒数
                var tyMS = Date.parse(ty);
                var ms = tyMS - nowMS;
                toyear.textContent = `${y}-${M}-${d}`;

                // year.textContent = Math.floor(ms / 1000 / 60 / 60 / 24 / 365);
                var av = average(now.getFullYear(), y);
                year.textContent = Math.floor(ms / 1000 / 60 / 60 / 24 / av.yearDay);

                // month.textContent = Math.floor(ms / 1000 / 60 / 60 / 24 / 30 % 12);
                month.textContent = Math.floor(ms / 1000 / 60 / 60 / 24 / av.monthDay % 12);
                if (month.textContent < 10) {
                    month.textContent = '0' + month.textContent;
                }

                // date.textContent = Math.floor(ms / 1000 / 60 / 60 / 24 % 30);
                date.textContent = Math.floor(ms / 1000 / 60 / 60 / 24 % av.monthDay);
                if (date.textContent < 10) {
                    date.textContent = '0' + date.textContent;
                }

                hour.textContent = Math.floor(ms / 1000 / 60 / 60 % 24);
                if (hour.textContent < 10) {
                    hour.textContent = '0' + hour.textContent;
                }

                minute.textContent = Math.floor(ms / 1000 / 60 % 60);
                if (minute.textContent < 10) {
                    minute.textContent = '0' + minute.textContent;
                }

                second.textContent = Math.floor(ms / 1000 % 60);
                if (second.textContent < 10) {
                    second.textContent = '0' + second.textContent;
                }

                if (second.textContent < 0) {
                    clearInterval(timer);
                    year.textContent = month.textContent = date.textContent = hour.textContent = minute.textContent = second.textContent = '0';
                }
                return;
            }
            throw new Error("形参必须是日期类型");
        }
        var timer = setInterval(function () {
            showDateInfo(new Date(2021, 8, 1, 15, 33, 59));
        }, 1000);

    </script>
</body>

</html>