2022年了，提前祝大家2023年快乐——2023年倒计时

最新推荐文章于 2023-03-22 15:10:44 发布

心醉瑶瑾前

最新推荐文章于 2023-03-22 15:10:44 发布

阅读量2.2k

点赞数 1

分类专栏：前端文章标签： css3 css javascript js 倒计时

本文链接：https://blog.csdn.net/qq_46452300/article/details/122267374

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果展示：
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>倒计时</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            height: 100%
        }

        body {
            background-image: url("newyear.jpg");
            background-size: 100% 100%;
            background-position: center center;
            font-size: 28px;
            font-family: "宋体";
            overflow-y: hidden;
            overflow-y: hidden;
        }

        .main {
            width: 100%;
            height: 100%;
            /*margin: 10% auto;*/
            /*border: 1px solid red;*/
        }

        .title {
            /*background: #20a53a;*/
            color: greenyellow;
            font-size: 40px;
            height: 50px;
            line-height: 50px;
            /*padding-left: 20px;*/
            text-align: center;
        }

        .content {
            /*background-color: #f3f7f9;*/
            height: calc(100% - 50px);
            border: 1px dashed #c6d9b6;
            text-align: center;
        }

        #time {
            display: block;
            margin-top: 100px;
            /*line-height: 900px;*/
            font-size: 60px;
            /*font-size: 100%;*/
            vertical-align: middle;
            color: yellow;
        }
    </style>
</head>

<body>
<div class="main">
    <div class="title">2023</div>
    <div class="content">
        <p id="time">祝大家新年快乐呀！</p>
    </div>
</div>
</body>
<script>
    window.onload = function () {
        let oTime = document.querySelector('#time')
        let Timer = setInterval(function () {
            let date = new Date()
            date.getDay()
            date.getMonth()
            date.getFullYear()
            console.log(date.getFullYear() == 2023)
            if (date.getFullYear() == 2023) {
                oTime.innerHTML = `2023,新年快乐！`
                clearInterval(Timer)//由 setInterval()返回的ID值可用作clearInterval()方法的参数。
            }
            oTime.innerHTML = ` 距 2023 年还有<br><br>
                                ${11 - date.getMonth()}月
                                ${getMonthDays(date.getFullYear(), date.getMonth()) - date.getDate()}天
                                ${23 - date.getHours()}时
                                ${59 - date.getMinutes()}分
                                ${60 - date.getSeconds()}秒`;
        }, 999)

        //获取某年某月天数
        function getMonthDays(year, month) {
            let date = new Date(year, month, 0)
            return date.getDate();
        }
    }
</script>
</html>