添加年化收益率计算器，从持仓天数和累计收益计算平均年化收益率

2026-07-23 18:21:08 +08:00
parent 14f046a4c3
commit 0758b431f6
1 changed files with 104 additions and 0 deletions
@@ -0,0 +1,104 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
    <meta charset="UTF-8">
    <title>持仓年化收益率计算器</title>
    <style>
        * {
            box-sizing: border-box;
            font-family: system-ui, sans-serif;
        }
        body {
            max-width: 460px;
            margin: 40px auto;
            padding: 0 20px;
            background: #f7f8fa;
        }
        .card {
            background: #fff;
            padding: 28px;
            border-radius: 14px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.08);
        }
        h2 {
            text-align: center;
            margin-top: 0;
            color: #222;
        }
        .item {
            margin: 16px 0;
        }
        label {
            display: block;
            margin-bottom: 6px;
            font-weight: 500;
            color: #333;
        }
        input {
            width: 100%;
            padding: 11px;
            border: 1px solid #d0d5dd;
            border-radius: 8px;
            font-size: 16px;
        }
        .result-box {
            margin-top: 24px;
            padding: 16px;
            background: #f0f7ff;
            border-radius: 10px;
        }
        .result-line {
            font-size: 17px;
            margin: 10px 0;
        }
        .tip {
            font-size: 13px;
            color: #666;
            margin-top: 8px;
        }
    </style>
 </head>
 <body>
    <div class="card">
        <h2>持仓年化收益率计算器</h2>
        <div class="item">
            <label>持仓天数</label>
            <input type="number" id="days" placeholder="例如：960" oninput="calc()">
        </div>
        <div class="item">
            <label>累计收益率（%）</label>
            <input type="number" id="rateTotal" placeholder="例如：10 代表10%" oninput="calc()">
        </div>
        <div class="result-box">
            <div class="result-line">复利年化收益率：<strong id="yearRateCompound">--</strong></div>
            <div class="result-line">单利参考年化：<strong id="yearRateSimple">--</strong></div>
            <div class="tip">说明：基金理财通用采用【复利年化】作为对比标准</div>
        </div>
    </div>
 <script>
 function calc() {
    const daysInput = document.getElementById('days');
    const rateInput = document.getElementById('rateTotal');
    const days = parseFloat(daysInput.value);
    const totalRatePct = parseFloat(rateInput.value);
    if (isNaN(days) || isNaN(totalRatePct) || days <= 0) {
        document.getElementById('yearRateCompound').innerText = '--';
        document.getElementById('yearRateSimple').innerText = '--';
        return;
    }
    const r = totalRatePct / 100;
    // 复利年化公式 (1+r)^(365/days) -1
    const compound = Math.pow(1 + r, 365 / days) - 1;
    // 单利简易估算
    const simple = r * 365 / days;
    document.getElementById('yearRateCompound').innerText = (compound * 100).toFixed(2) + ' %';
    document.getElementById('yearRateSimple').innerText = (simple * 100).toFixed(2) + ' %';
 }
 </script>
 </body>
 </html>