文件名：index.html
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lunar Timer</title>
    <link rel="stylesheet" href="style.css" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="container">
      <header>
        <h1>Lunar Timer</h1>
      </header>

      <div class="datetime-container">
        <div class="date-display" id="currentDate">2025年2月10日 星期日</div>
        <div class="time-display" id="currentTime">00:00:00</div>
      </div>

      <div class="counter-container">
        <div class="counter-title">今天是农历新年的第</div>
        <div class="days-counter" id="daysCounter">0</div>
        <div class="counter-text">天</div>
      </div>

      <div class="wish-container">
        <button id="generateWishBtn" class="wish-btn">生成祝福语</button>
        <div id="wishOutput" class="wish-output"></div>
      </div>

      <div class="lunar-info">
        <div class="info-title">农历新年信息</div>
        <div class="info-content">
          <p>2025年农历新年（春节）开始于：<strong>2025年1月29日</strong></p>
          <p>2025年是农历乙巳年（蛇年）</p>
        </div>
      </div>
    </div>

    <footer>
      <p>Lunar Timer © 2025 | 农历新年天数计算器</p>
    </footer>

    <script src="script.js"></script>
  </body>
</html>
文件名：script.js
document.addEventListener("DOMContentLoaded", function () {
  // 获取DOM元素
  const currentDateElement = document.getElementById("currentDate");
  const currentTimeElement = document.getElementById("currentTime");
  const daysCounterElement = document.getElementById("daysCounter");
  const generateWishBtn = document.getElementById("generateWishBtn");
  const wishOutput = document.getElementById("wishOutput");

  // 设置2025年农历新年开始日期 (2025年1月29日)
  const lunarNewYear2025 = new Date(2025, 0, 29);

  // 数字转中文大写函数
  function numberToChinese(num) {
    const chineseNumbers = [
      "零",
      "一",
      "二",
      "三",
      "四",
      "五",
      "六",
      "七",
      "八",
      "九",
    ];
    const units = ["", "十", "百", "千"];

    if (num === 0) return "零";
    if (num < 10) return chineseNumbers[num];

    let result = "";
    let numStr = num.toString();
    let len = numStr.length;

    for (let i = 0; i < len; i++) {
      const digit = parseInt(numStr[i]);
      const unitIndex = len - i - 1;

      if (digit !== 0) {
        // 处理十位上的"一"省略情况 (如10读作"十"而不是"一十")
        if (!(unitIndex === 1 && digit === 1 && i === 0)) {
          result += chineseNumbers[digit];
        }
        result += units[unitIndex];
      } else {
        // 避免连续零和结尾零
        if (result[result.length - 1] !== "零" && i < len - 1) {
          result += "零";
        }
      }
    }

    // 移除末尾的零
    if (result.endsWith("零")) {
      result = result.slice(0, -1);
    }

    return result;
  }

  // 获取已过天数
  function getDaysPassed() {
    const now = new Date();
    const diffTime = Math.abs(now - lunarNewYear2025);
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
    return now < lunarNewYear2025 ? 0 : diffDays;
  }

  // 更新时间和日期
  function updateDateTime() {
    const now = new Date();

    // 格式化日期
    const options = {
      year: "numeric",
      month: "long",
      day: "numeric",
      weekday: "long",
    };
    currentDateElement.textContent = now.toLocaleDateString("zh-CN", options);

    // 格式化时间
    const time = now.toLocaleTimeString("zh-CN");
    currentTimeElement.textContent = time;

    // 更新天数计数器
    const dayCount = getDaysPassed();
    daysCounterElement.textContent = numberToChinese(dayCount);
  }

  // 生成祝福语
  function generateWish() {
    const daysPassed = getDaysPassed();
    const dayChinese = numberToChinese(daysPassed);
    const wishText = `新年第${dayChinese}天快乐~`;

    wishOutput.textContent = wishText;
    wishOutput.classList.remove("copied");
  }

  // 复制祝福语到剪贴板
  function copyWishToClipboard() {
    if (wishOutput.textContent) {
      navigator.clipboard
        .writeText(wishOutput.textContent)
        .then(() => {
          wishOutput.classList.add("copied");
          setTimeout(() => {
            wishOutput.classList.remove("copied");
          }, 2000);
        })
        .catch((err) => {
          console.error("复制失败:", err);
          alert("复制失败，请手动复制文本");
        });
    }
  }

  // 事件监听
  generateWishBtn.addEventListener("click", generateWish);
  wishOutput.addEventListener("click", copyWishToClipboard);

  // 初始更新
  updateDateTime();

  // 每秒更新一次时间
  setInterval(updateDateTime, 1000);
});

文件名：style.css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Material Design 3 色彩系统 */
  --md-sys-color-primary: #6750a4;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #eaddff;
  --md-sys-color-on-primary-container: #21005d;

  --md-sys-color-secondary: #625b71;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #e8def8;
  --md-sys-color-on-secondary-container: #1d192b;

  --md-sys-color-tertiary: #7d5260;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #ffd8e4;
  --md-sys-color-on-tertiary-container: #31111d;

  --md-sys-color-surface: #1c1b1f;
  --md-sys-color-surface-variant: #49454f;
  --md-sys-color-on-surface: #e6e1e5;
  --md-sys-color-on-surface-variant: #cac4d0;

  --md-sys-color-background: #1c1b1f;
  --md-sys-color-on-background: #e6e1e5;

  --md-sys-color-outline: #938f99;
  --md-sys-color-outline-variant: #49454f;

  /* 提升层级 */
  --md-sys-color-surface-1: #2b2930;
  --md-sys-color-surface-2: #36343b;
  --md-sys-color-surface-3: #403e47;
  --md-sys-color-surface-4: #44414a;
  --md-sys-color-surface-5: #484650;
}

body {
  font-family: "Roboto", "Microsoft YaHei", sans-serif;
  background: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.5;
}

.container {
  text-align: center;
  padding: 2rem;
  background: var(--md-sys-color-surface-1);
  border-radius: 28px;
  max-width: 800px;
  width: 90%;
  margin: 1rem;
  /* Material Design 3 阴影 */
  box-shadow:
    0 1px 3px 1px rgba(0, 0, 0, 0.15),
    0 1px 2px 0 rgba(0, 0, 0, 0.3);
}

header {
  margin-bottom: 2rem;
}

h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  color: var(--md-sys-color-primary);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
}

.datetime-container {
  background: var(--md-sys-color-surface-2);
  border-radius: 24px;
  padding: 2rem;
  margin: 1.5rem 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.datetime-container:hover {
  background: var(--md-sys-color-surface-3);
}

.date-display {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--md-sys-color-on-surface-variant);
  font-weight: 400;
}

.time-display {
  font-size: 3.5rem;
  font-weight: 200;
  color: var(--md-sys-color-on-surface);
  letter-spacing: -0.5px;
  font-feature-settings: "tnum";
}

.counter-container {
  background: var(--md-sys-color-primary-container);
  border-radius: 24px;
  padding: 2rem;
  margin: 1.5rem 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.counter-container:hover {
  transform: scale(1.02);
  box-shadow:
    0 2px 4px 2px rgba(0, 0, 0, 0.15),
    0 2px 3px 0 rgba(0, 0, 0, 0.3);
}

.counter-title {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--md-sys-color-on-primary-container);
  font-weight: 500;
}

.days-counter {
  font-size: 4rem;
  font-weight: 300;
  color: var(--md-sys-color-primary);
  letter-spacing: -1px;
  line-height: 1;
  font-feature-settings: "tnum";
}

.counter-text {
  font-size: 1.25rem;
  margin-top: 0.5rem;
  color: var(--md-sys-color-on-primary-container);
  font-weight: 500;
}

.wish-container {
  background: var(--md-sys-color-surface-2);
  border-radius: 24px;
  padding: 2rem;
  margin: 1.5rem 0;
  text-align: center;
}

.wish-btn {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border: none;
  border-radius: 20px;
  padding: 0.75rem 2rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 1rem;
  min-height: 48px;
  box-shadow:
    0 1px 2px 0 rgba(0, 0, 0, 0.3),
    0 1px 3px 1px rgba(0, 0, 0, 0.15);
}

.wish-btn:hover {
  box-shadow:
    0 2px 4px 0 rgba(0, 0, 0, 0.3),
    0 4px 5px 1px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.wish-btn:active {
  transform: translateY(0);
  box-shadow:
    0 1px 2px 0 rgba(0, 0, 0, 0.3),
    0 1px 3px 1px rgba(0, 0, 0, 0.15);
}

.wish-output {
  background: var(--md-sys-color-surface-3);
  border-radius: 16px;
  padding: 1rem 1.5rem;
  font-size: 1.125rem;
  color: var(--md-sys-color-tertiary);
  font-weight: 400;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wish-output:hover {
  background: var(--md-sys-color-surface-4);
  box-shadow:
    0 1px 2px 0 rgba(0, 0, 0, 0.3),
    0 1px 3px 1px rgba(0, 0, 0, 0.15);
}

.wish-output::after {
  content: "点击复制";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: var(--md-sys-color-on-surface-variant);
  opacity: 0.7;
}

.wish-output.copied {
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
}

.wish-output.copied::after {
  content: "✓ 已复制";
  color: var(--md-sys-color-on-tertiary-container);
  opacity: 1;
}

.lunar-info {
  background: var(--md-sys-color-surface-2);
  border-radius: 24px;
  padding: 1.5rem 2rem;
  margin-top: 1.5rem;
}

.info-title {
  font-size: 1.125rem;
  color: var(--md-sys-color-secondary);
  margin-bottom: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1px;
}

.info-content {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--md-sys-color-on-surface-variant);
}

.info-content strong {
  color: var(--md-sys-color-on-surface);
  font-weight: 500;
}

footer {
  margin-top: 2rem;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.875rem;
  text-align: center;
  padding: 1rem;
  opacity: 0.8;
}

/* 响应式设计 */
@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }

  .time-display {
    font-size: 2.5rem;
  }

  .days-counter {
    font-size: 3rem;
  }

  .container {
    border-radius: 20px;
  }

  .datetime-container,
  .counter-container,
  .wish-container,
  .lunar-info {
    border-radius: 16px;
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 1.75rem;
  }

  .time-display {
    font-size: 2rem;
  }

  .days-counter {
    font-size: 2.5rem;
  }

  .container {
    padding: 1.5rem;
    border-radius: 16px;
  }

  .datetime-container,
  .counter-container,
  .wish-container,
  .lunar-info {
    border-radius: 12px;
    padding: 1.25rem;
  }

  .wish-btn {
    padding: 0.625rem 1.5rem;
    font-size: 0.875rem;
  }

  .wish-output {
    font-size: 1rem;
    padding: 0.875rem;
  }

  .wish-output::after {
    font-size: 0.625rem;
  }
}

/* 焦点样式 */
*:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

/* 动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.container {
  animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

优化移动端交互体验