|
|
@@ -0,0 +1,184 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>纪念日追踪器</title>
|
|
|
+ <style>
|
|
|
+ body {
|
|
|
+ font-family: 'Microsoft YaHei', Arial, sans-serif;
|
|
|
+ max-width: 800px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 20px;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ .container {
|
|
|
+ background-color: white;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 30px;
|
|
|
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+ h1 {
|
|
|
+ color: #e74c3c;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ }
|
|
|
+ .info-box {
|
|
|
+ border-left: 4px solid #3498db;
|
|
|
+ padding: 15px;
|
|
|
+ margin: 20px 0;
|
|
|
+ background-color: #f8f9fa;
|
|
|
+ }
|
|
|
+ .time-diff {
|
|
|
+ font-size: 24px;
|
|
|
+ text-align: center;
|
|
|
+ margin: 30px 0;
|
|
|
+ color: #2c3e50;
|
|
|
+ }
|
|
|
+ .time-details {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 10px;
|
|
|
+ margin: 20px 0;
|
|
|
+ }
|
|
|
+ .time-unit {
|
|
|
+ text-align: center;
|
|
|
+ background-color: #3498db;
|
|
|
+ color: white;
|
|
|
+ padding: 8px 10px;
|
|
|
+ border-radius: 5px;
|
|
|
+ min-width: 60px;
|
|
|
+ }
|
|
|
+ .time-unit .value {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .time-unit .label {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .error {
|
|
|
+ color: #e74c3c;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+<div class="container">
|
|
|
+ <h1 id="title">纪念日追踪器</h1>
|
|
|
+
|
|
|
+ <div class="info-box">
|
|
|
+ <p>纪念日: <strong id="event-text">加载中...</strong></p>
|
|
|
+ <p>开始日期: <strong id="start-date">加载中...</strong></p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="time-diff" id="time-diff">计算中...</div>
|
|
|
+
|
|
|
+ <div class="time-details">
|
|
|
+ <div class="time-unit">
|
|
|
+ <div class="value" id="years">-</div>
|
|
|
+ <div class="label">年</div>
|
|
|
+ </div>
|
|
|
+ <div class="time-unit">
|
|
|
+ <div class="value" id="months">-</div>
|
|
|
+ <div class="label">月</div>
|
|
|
+ </div>
|
|
|
+ <div class="time-unit">
|
|
|
+ <div class="value" id="days">-</div>
|
|
|
+ <div class="label">日</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<script>
|
|
|
+ document.addEventListener('DOMContentLoaded', function() {
|
|
|
+ // 获取URL参数
|
|
|
+ const urlParams = new URLSearchParams(window.location.search);
|
|
|
+ const dateStr = urlParams.get('date');
|
|
|
+ const eventText = urlParams.get('text');
|
|
|
+
|
|
|
+ if (!dateStr || !eventText) {
|
|
|
+ document.getElementById('title').textContent = '参数错误';
|
|
|
+ document.getElementById('event-text').textContent = '未提供纪念日文本';
|
|
|
+ document.getElementById('start-date').textContent = '未提供日期';
|
|
|
+ document.getElementById('time-diff').innerHTML = '<span class="error">请提供正确的URL参数: ?date=YYYY-MM-DD&text=纪念日文本</span>';
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 解析日期
|
|
|
+ const startDate = new Date(dateStr);
|
|
|
+ if (isNaN(startDate.getTime())) {
|
|
|
+ document.getElementById('start-date').textContent = '日期格式错误';
|
|
|
+ document.getElementById('time-diff').innerHTML = '<span class="error">日期格式应为: YYYY-MM-DD</span>';
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 显示基本信息
|
|
|
+ document.getElementById('event-text').textContent = eventText;
|
|
|
+ document.getElementById('start-date').textContent = formatDate(startDate);
|
|
|
+ document.getElementById('title').textContent = eventText;
|
|
|
+
|
|
|
+ // 计算时间差
|
|
|
+ calculateTimeDifference(startDate);
|
|
|
+
|
|
|
+ // 每天更新一次时间差
|
|
|
+ setInterval(function() {
|
|
|
+ calculateTimeDifference(startDate);
|
|
|
+ }, 86400000); // 24小时
|
|
|
+ });
|
|
|
+
|
|
|
+ function calculateTimeDifference(startDate) {
|
|
|
+ const now = new Date();
|
|
|
+
|
|
|
+ // 计算年月日差
|
|
|
+ let years = now.getFullYear() - startDate.getFullYear();
|
|
|
+ let months = now.getMonth() - startDate.getMonth();
|
|
|
+ let days = now.getDate() - startDate.getDate();
|
|
|
+
|
|
|
+ // 调整负数月份和日期
|
|
|
+ if (days < 0) {
|
|
|
+ months--;
|
|
|
+ // 获取上个月的天数
|
|
|
+ const lastMonth = new Date(now.getFullYear(), now.getMonth(), 0);
|
|
|
+ days += lastMonth.getDate();
|
|
|
+ }
|
|
|
+
|
|
|
+ if (months < 0) {
|
|
|
+ years--;
|
|
|
+ months += 12;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 更新显示
|
|
|
+ document.getElementById('years').textContent = years;
|
|
|
+ document.getElementById('months').textContent = months;
|
|
|
+ document.getElementById('days').textContent = days;
|
|
|
+
|
|
|
+ // 更新总体时间差显示
|
|
|
+ let timeDiffText = '已经过去了 ';
|
|
|
+ if (years > 0) {
|
|
|
+ timeDiffText += years + ' 年 ';
|
|
|
+ }
|
|
|
+ if (months > 0) {
|
|
|
+ timeDiffText += months + ' 个月 ';
|
|
|
+ }
|
|
|
+ if (days > 0) {
|
|
|
+ timeDiffText += days + ' 天';
|
|
|
+ }
|
|
|
+
|
|
|
+ if (years === 0 && months === 0 && days === 0) {
|
|
|
+ timeDiffText = '就是今天！';
|
|
|
+ }
|
|
|
+
|
|
|
+ document.getElementById('time-diff').textContent = timeDiffText;
|
|
|
+ }
|
|
|
+
|
|
|
+ function formatDate(date) {
|
|
|
+ const year = date.getFullYear();
|
|
|
+ const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
|
|
+ const day = date.getDate().toString().padStart(2, '0');
|
|
|
+ return `${year}年${month}月${day}日`;
|
|
|
+ }
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|
