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

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>