给博客添加一个自动更新基金持仓盈亏的页面

<style>
	table.fund h1 {
	    color: #2d2d2d;
	    font-weight: 600;
	    margin-bottom: 1.5rem;
	    padding-bottom: 0.5rem;
	    border-bottom: 2px solid #c62541;
	}
	
	table.fund {
	    border-collapse: collapse;
	    width: 100%;
	    background: white;
	    text-align: center;
	    border-radius: 8px;
	    margin-bottom: 5rem;
	    overflow: hidden;
	    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
	    transition: box-shadow 0.3s ease;
	}
	
	table.fund:hover {
	    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
	}
	
	table.fund th {
	    background: #c62541;
	    color: white;
	    padding: 14px 16px;
	    font-weight: 600;
	    text-transform: uppercase;
	    font-size: 0.9em;
	}
	
	table.fund td {
	    padding: 12px 16px;
	    color: #444;
	    border: 1px solid #f0f0f0;
	}
	
	table.fund tr:last-child td {
	    border-bottom: none;
	}
	
	table.fund tr:hover td {
	    background: #fff5f7;
	}
	
	table.fund .positive {
	    color: #c62541;
	    font-weight: 500;
	}
	
	table.fund .negative {
	    color: #27ae60;
	    font-weight: 500;
	}
	
	/* 响应式处理 */
	@media (max-width: 768px) {
	    table.fund td, th {
	        padding: 10px 12px;
	        font-size: 0.9em;
	    }
	    
	    table.fund h1 {
	        font-size: 1.4rem;
	    }
	}
	
	/* 时间显示样式 */
	table.fund #current-time {
	    color: #c62541;
	    font-weight: 500;
	}
</style>
<table>
	<thead>
		<tr>
			<th>基金代码</th>
			<th>持有份额</th>
			<th>成本价</th>
			<th>当前净值</th>
			<th>持仓收益</th>
			<th>更新时间</th>
		</tr>
	</thead>
	<tbody id="funds-body"></tbody>
	<tfoot class="highlight" id="summary-footer"></tfoot>
</table>
<p style="margin-top: 1rem; color: #666;">
	数据更新频率：每日凌晨3点自动更新
	<br>当前时间：<span id="current-time"></span>
</p>
<script>
	// 配置参数
	const JSON_URL = 'https://static.goldrun.click/json/fund.json';
	// 初始化
	document.addEventListener('DOMContentLoaded', async () => {
	    try {
	        const funds = await loadFundsData();
	        renderTable(funds);
	        startClock();
	    } catch (error) {
	        showError(error.message);
	    }
	});
	// 加载远程数据
	async function loadFundsData() {
	    try {
	        const response = await fetch(JSON_URL);
	        if (!response.ok) throw new Error('网络响应异常');
	        return await response.json();
	    } catch (error) {
	        throw new Error('数据加载失败，请稍后刷新');
	    }
	}
	// 渲染表格
	function renderTable(funds) {
	    let total = { cost: 0, current: 0, profit: 0 };
	    const tbody = document.getElementById('funds-body');
	    // 生成数据行
	    tbody.innerHTML = funds.map(fund => {
	        const fundCost = fund.cost_price * fund.shares;
	        const fundCurrent = fund.latest_net_value * fund.shares;
	        const profit = fundCurrent - fundCost;
	        // 累计总数
	        total.cost += fundCost;
	        total.current += fundCurrent;
	        total.profit += profit;
	        return `
	        <tr>
	            <td>${fund.code}</td>
	            <td>${formatNumber(fund.shares, 2)}</td>
	            <td>${formatNumber(fund.cost_price, 4)}</td>
	            <td>${fund.latest_net_value ? formatNumber(fund.latest_net_value, 4) : '--'}</td>
	            <td class="${profit >= 0 ? 'positive' : 'negative'}">
	                ${formatNumber(profit, 2)}
	            </td>
	            <td>${fund.last_updated || '--'}</td>
	        </tr>`;
	    }).join('');
	    // 生成汇总行
	    const footer = document.getElementById('summary-footer');
	    footer.innerHTML = `
	        <tr>
	            <td colspan="4">总收益</td>
	            <td class="${total.profit >= 0 ? 'positive' : 'negative'}">
	                ${formatNumber(total.profit, 2)}
	            </td>
	            <td></td>
	        </tr>
	        <tr>
	            <td colspan="4">总收益率</td>
	            <td class="${total.profit >= 0 ? 'positive' : 'negative'}">
	                ${total.cost ? formatNumber((total.profit / total.cost) * 100, 2) + '%' : '--'}
	            </td>
	            <td></td>
	        </tr>`;
	}
	// 数字格式化
	function formatNumber(num, digits) {
	    return num.toLocaleString('zh-CN', {
	        minimumFractionDigits: digits,
	        maximumFractionDigits: digits
	    });
	}
	// 实时时钟
	function startClock() {
	    function updateTime() {
	        document.getElementById('current-time').textContent = 
	            new Date().toLocaleString('zh-CN');
	    }
	    updateTime();
	    setInterval(updateTime, 1000);
	}
	// 错误显示
	function showError(message) {
	    const tbody = document.getElementById('funds-body');
	    tbody.innerHTML = `<tr><td colspan="6" style="color:red">${message}</td></tr>`;
	}
</script>