HTML&CSS&JS ：日历卡片这段代码是一个简单的HTML日历卡片页面，用于显示当前的星期几和日期。大家复制代码时

这段代码是一个简单的HTML日历卡片页面，用于显示当前的星期几和日期。

大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信我，我会发送完整的压缩包给你。

演示效果

HTML&CSS


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公众号关注：前端Hardy</title>
    <style>
        html,
        body {
            height: 100%;
            width: 100%;
            background: linear-gradient(to left, #2c3e50, #3498db);
            font: 100%/1.5em "Droid Sans", sans-serif;
            margin: 0;
        }

        p {
            margin: 0;
        }

        .container {
            height: 248px;
            left: 50%;
            margin: -124px 0 0 -100px;
            position: absolute;
            top: 50%;
            width: 200px;
        }

        .app {
            text-align: center;
        }

        .app-calendar {
            height: 200px;
            margin-bottom: 24px;
            width: 200px;
        }

        .app-title {
            font-size: 24px;
            font-weight: bold;
            text-shadow: 0 5px #15181f;
        }

        #weekday {
            background: #34495e;
            border-radius: 35px 35px 0 0;
            color: #f9f9f9;
            font-size: 24px;
            line-height: 56px;
            position: relative;
            text-transform: lowercase;
        }

        #weekday:before,
        #weekday:after {
            background: #f9f9f9;
            border-radius: 50%;
            content: "";
            height: 8px;
            margin-top: -4px;
            position: absolute;
            top: 50%;
            width: 8px;
            z-index: 1;
        }

        #weekday:before {
            left: 24px;
        }

        #weekday:after {
            right: 24px;
        }

        #day {
            background: #f9f9f9;
            border-radius: 0 0 35px 35px;
            box-shadow: 0 8px 0 #202933;
            color: #15181f;
            font-size: 120px;
            font-weight: bold;
            height: 144px;
            line-height: 144px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="app">
            <div class="app-calendar">
                <div id="weekday">monday</div>
                <div id="day">13</div>
            </div>
        </div>
    </div>
    <script>
        (function () {
            var date = new Date(),
                weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
            document.getElementById('weekday').innerHTML = weekday[date.getDay()];
            document.getElementById('day').innerHTML = date.getDate();

        })();
    </script>
</body>

</html>

HTML 结构

app-calendar：包含两个子元素：
weekday：显示星期几。
day：显示日期。

CSS 样式

html, body：设置页面的宽高为100%，背景为从左到右的渐变色（从#2c3e50到#3498db），字体为"Droid Sans"，无边距。
p：将段落的默认外边距设置为0。
.container：绝对定位，居中显示，宽高分别为200px和248px。
.app-calendar：设置日历的宽高为200px，居中显示。
.app-title：设置标题字体大小为24px，加粗，有阴影。
#weekday：设置星期几的背景颜色、字体大小、行高、文本转换为小写，并添加两个圆形装饰（伪元素::before和::after）。
#day：设置日期的背景颜色、字体大小、行高、阴影等样式。

JavaScript部分

(function () {
    var date = new Date(),
        weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    document.getElementById('weekday').innerHTML = weekday[date.getDay()];
    document.getElementById('day').innerHTML = date.getDate();
})();

匿名自执行函数

new Date()：创建一个表示当前日期和时间的对象。
date.getDay()：获取当前日期的星期几（返回值为0到6，分别表示星期日到星期六）。
date.getDate()：获取当前日期的日期部分（1到31）。
document.getElementById('weekday').innerHTML：将weekday的内容设置为当前的星期几。
document.getElementById('day').innerHTML：将day的内容设置为当前日期的日期部分。

各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！