tianyunperfect
/
web-base--


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
							<!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;
        }

        // 修改html页面标题
        document.title = eventText;

        // 解析日期
        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>