104 lines
3.0 KiB
HTML
104 lines
3.0 KiB
HTML
<!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> |