DeepSeek生成台历
同事想打印台历，在网上没有找到合适的图片，突然想起让AI生成台历，下面就是deepseek生成的台历：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2026年3月 · 台历（周一始）</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif;
}
body {
background: linear-gradient(145deg, #7f8c8d 0%, #95a5a6 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 1.5rem;
margin: 0;
}
/* 台历主卡片 */
.desk-calendar {
position: relative;
max-width: 700px;
width: 100%;
background: #fef9f0; /* 暖白旧纸色 */
border-radius: 28px 28px 18px 18px;
box-shadow:
0 20px 30px -10px rgba(0,0,0,0.5),
0 0 0 1px #d8c8b0 inset,
0 10px 0 0 #b59e8b; /* 底部阴影模拟厚度 */
padding: 30px 20px 25px 20px;
transition: transform 0.2s ease;
}
.desk-calendar:hover {
transform: translateY(-5px);
box-shadow:
0 25px 35px -8px rgba(0,0,0,0.6),
0 0 0 1px #d8c8b0 inset,
0 10px 0 0 #b59e8b;
}
/* 两个装订孔 (金属环) */
.hole {
position: absolute;
top: -10px;
width: 36px;
height: 36px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #f0f0f0, #b0b0b0);
border: 2px solid #8a7a6a;
box-shadow:
inset -2px -2px 5px rgba(0,0,0,0.2),
inset 2px 2px 5px rgba(255,255,255,0.8),
0 2px 5px rgba(0,0,0,0.3);
z-index: 5;
}
.hole-left {
left: 18%;
}
.hole-right {
right: 18%;
}
/* 月份标题 */
.month-header {
text-align: center;
margin-bottom: 20px;
border-bottom: 2px dashed #d4b99b;
padding-bottom: 12px;
}
.month-header h2 {
font-size: 3rem;
font-weight: 400;
font-family: 'Dancing Script', 'Brush Script MT', cursive;
color: #4b3a2b;
text-shadow: 2px 2px 0 #e9dacb;
letter-spacing: 2px;
}
.month-header p {
font-size: 1.2rem;
color: #7b5f47;
letter-spacing: 4px;
text-transform: uppercase;
margin-top: -5px;
}
/* 星期行 — 周一～周日 */
.weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
text-align: center;
margin-bottom: 8px;
font-weight: 600;
color: #9e7b62;
background: #efe2d3;
border-radius: 40px;
padding: 10px 0;
box-shadow: inset 0 2px 3px rgba(255,250,240,0.8), inset 0 -2px 3px rgba(0,0,0,0.05);
}
.weekday {
font-size: 1.3rem;
font-family: 'Trebuchet MS', sans-serif;
}
/* 周六(索引5) 和 周日(索引6) 标红 */
.weekend-day {
color: #c0574b;
}
/* 日期网格 */
.days-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 8px;
background: transparent;
}
/* 每个日期格子 (台历方块) */
.day-cell {
aspect-ratio: 1 / 1.1;
background: #fffcf7;
border-radius: 16px;
box-shadow:
0 4px 6px rgba(0,0,0,0.05),
0 0 0 1px #ebd9c9 inset,
0 -2px 0 #cbb59e inset;
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: all 0.1s;
font-size: 2rem;
font-weight: 500;
color: #3f2e1f;
padding: 4px;
}
/* 周末日期特殊颜色：周六列(索引5) 和 周日列(索引6) */
.day-cell.weekend {
color: #c0392b;
background: #fff1ed;
}
/* 空白格子 (无日期) */
.day-cell.empty {
background: #f5ede3;
box-shadow: inset 0 0 0 1px #e0cfbf, 0 2px 4px rgba(0,0,0,0.02);
color: transparent;
}
/* 数字绝对居中 */
.date-number {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 2rem;
line-height: 1;
}
/* 节日小标记 (右下角emoji) */
.fest-mark {
position: absolute;
bottom: 4px;
right: 6px;
font-size: 1.3rem;
line-height: 1;
filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1));
pointer-events: none;
}
/* 特殊节日加强背景 */
.day-cell.special-fest {
background: #fff2e0;
}
/* 底部仿站立支架 */
.calendar-stand {
width: 80%;
height: 16px;
background: #ac9482;
margin: -2px auto -25px auto;
border-radius: 0 0 40px 40px;
box-shadow: 0 10px 12px -5px #3d2e24;
}
/* 响应式小屏调整 */
@media (max-width: 500px) {
.month-header h2 { font-size: 2.4rem; }
.weekday { font-size: 1rem; }
.day-cell { font-size: 1.5rem; }
.date-number { font-size: 1.5rem; }
.fest-mark { font-size: 1rem; bottom: 2px; right: 2px; }
.hole { width: 28px; height: 28px; top: -8px; }
}
</style>
<!-- 手写字体 -->
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="desk-calendar">
<!-- 金属环 -->
<div class="hole hole-left"></div>
<div class="hole hole-right"></div>
<div class="month-header">
<h2>March 2026</h2>
<p>三月 · 春日</p>
</div>
<!-- 星期行：周一 ～ 周日 -->
<div class="weekdays">
<span class="weekday">一</span>
<span class="weekday">二</span>
<span class="weekday">三</span>
<span class="weekday">四</span>
<span class="weekday">五</span>
<span class="weekday weekend-day">六</span>
<span class="weekday weekend-day">日</span>
</div>
<!-- 日期网格（由js生成） -->
<div class="days-grid" id="calendarDays"></div>
<div class="calendar-stand"></div>
</div>
<script>
(function() {
const year = 2026;
const month = 2; // 3月 (0索引)
const firstDay = new Date(year, month, 1);
const startWeekday = firstDay.getDay(); // 0 = 周日, 1 = 周一 ... 6 = 周六
const daysInMonth = new Date(year, month + 1, 0).getDate(); // 31
// 转换为以周一为第一列的列索引 (周一=0, 周二=1, ... 周日=6)
const startCol = (startWeekday + 6) % 7; // 周日(0) -> 6, 周一(1) -> 0, ..., 周六(6) -> 5
// 节日映射 (和之前一样)
const festivalMap = {
8: { emoji: '👩', name: '妇女节' },
12: { emoji: '🌲', name: '植树节' },
14: { emoji: '🍫', name: '白色情' },
15: { emoji: '🛒', name: '消费者' },
20: { emoji: '🌱', name: '春分' }
};
const grid = document.getElementById('calendarDays');
grid.innerHTML = '';
const totalCells = 42; // 6行 * 7列
for (let i = 0; i < totalCells; i++) {
// 当前格子的列索引 (0-6)
const col = i % 7;
// 计算该格子对应的日期数字 (如果有效)
const dayNumber = i - startCol + 1;
const cell = document.createElement('div');
cell.className = 'day-cell';
if (dayNumber >= 1 && dayNumber <= daysInMonth) {
// 有效日期
const numberSpan = document.createElement('span');
numberSpan.className = 'date-number';
numberSpan.textContent = dayNumber;
cell.appendChild(numberSpan);
// 判断是否为周末: 周六(列5) 或 周日(列6)
if (col === 5 || col === 6) {
cell.classList.add('weekend');
}
// 添加节日标记
if (festivalMap[dayNumber]) {
const mark = document.createElement('span');
mark.className = 'fest-mark';
mark.textContent = festivalMap[dayNumber].emoji;
cell.title = festivalMap[dayNumber].name;
cell.appendChild(mark);
cell.classList.add('special-fest');
}
// 个别节日特殊背景 (可选)
if (dayNumber === 8) {
cell.style.background = '#ffe4e1';
}
if (dayNumber === 12) {
cell.style.background = '#e3f0da';
}
} else {
// 空白格子
cell.classList.add('empty');
}
grid.appendChild(cell);
}
// 验证: 2026年3月1日是周日，应该在最后一列(列6)，即第一个周日位置。
// 通过startCol=6, i=6时dayNumber=1，正确。
})();
</script>
</body>
</html>
还蛮好看的，对吧。
浙公网安备 33010602011771号