高级复利计算器-金阳工具箱
:root {
–primary-color: #4a6fa5;
–secondary-color: #6b8cbc;
–accent-color: #ff6b6b;
–light-color: #f8f9fa;
–dark-color: #343a40;
–success-color: #28a745;
–border-radius: 10px;
–box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: \’Segoe UI\’, Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
padding: 20px;
color: var(–dark-color);
}
.container {
max-width: 1200px;
margin: 0 auto;
}
header {
text-align: center;
padding: 30px 0;
}
h1 {
color: var(–primary-color);
font-size: 2.5rem;
margin-bottom: 10px;
}
.subtitle {
color: var(–secondary-color);
font-size: 1.2rem;
max-width: 600px;
margin: 0 auto;
}
.calculator-container {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin-bottom: 40px;
}
.input-section {
flex: 1;
min-width: 300px;
background: white;
padding: 25px;
border-radius: var(–border-radius);
box-shadow: var(–box-shadow);
}
.result-section {
flex: 1;
min-width: 300px;
background: white;
padding: 25px;
border-radius: var(–border-radius);
box-shadow: var(–box-shadow);
}
.input-row {
display: flex;
gap: 15px;
margin-bottom: 20px;
}
.input-group {
flex: 1;
}
label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: var(–dark-color);
}
input, select {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 1rem;
}
input:focus, select:focus {
outline: none;
border-color: var(–primary-color);
box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.2);
}
.btn {
background: var(–primary-color);
color: white;
border: none;
padding: 14px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 1.1rem;
font-weight: 600;
width: 100%;
transition: all 0.3s ease;
}
.btn:hover {
background: var(–secondary-color);
transform: translateY(-2px);
}
.result-card {
background: linear-gradient(135deg, #4a6fa5 0%, #6b8cbc 100%);
color: white;
padding: 20px;
border-radius: var(–border-radius);
margin-bottom: 25px;
text-align: center;
}
.result-title {
font-size: 1.2rem;
margin-bottom: 10px;
}
.result-value {
font-size: 2.2rem;
font-weight: 700;
}
.result-details {
background: var(–light-color);
padding: 20px;
border-radius: var(–border-radius);
margin-bottom: 20px;
}
.detail-item {
display: flex;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid #eee;
}
.chart-container {
background: white;
padding: 25px;
border-radius: var(–border-radius);
box-shadow: var(–box-shadow);
margin-bottom: 40px;
}
.chart-title {
text-align: center;
margin-bottom: 20px;
color: var(–primary-color);
}
.info-section {
background: white;
padding: 25px;
border-radius: var(–border-radius);
box-shadow: var(–box-shadow);
margin-bottom: 40px;
}
.info-title {
color: var(–primary-color);
margin-bottom: 15px;
}
.info-content {
line-height: 1.6;
}
.info-content ul {
padding-left: 20px;
margin: 15px 0;
}
.info-content li {
margin-bottom: 8px;
}
.highlight {
background-color: #fff9c4;
padding: 2px 5px;
border-radius: 3px;
}
.tab-container {
margin-bottom: 20px;
}
.tabs {
display: flex;
border-bottom: 1px solid #ddd;
margin-bottom: 20px;
}
.tab {
padding: 10px 20px;
cursor: pointer;
border-bottom: 3px solid transparent;
transition: all 0.3s ease;
}
.tab.active {
border-bottom-color: var(–primary-color);
color: var(–primary-color);
font-weight: 600;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
@media (max-width: 768px) {
.calculator-container {
flex-direction: column;
}
.input-row {
flex-direction: column;
gap: 15px;
}
}
高级复利计算器
专为股票、基金等投资设计的复利计算工具，支持日、周、月、年利率输入
输入参数
日利率
周利率
月利率
年利率
每日复利
每周复利
每月复利
每年复利
计算结果
¥10,000.00
¥1,040.81
10.41%
10.41%
每月复利
日利率 0.1%
财富增长趋势图
复利计算说明
如何使用：
- 输入您的本金金额
- 输入利率值并选择利率周期（日/周/月/年）
- 选择复利频率（每日/每周/每月/每年）
- 选择按天/周/月/年输入投资期限
- 点击\”计算复利\”按钮查看结果
利率转换说明：
系统会自动将您输入的利率转换为日利率进行计算：
- 日利率：直接使用
- 周利率：除以7得到日利率
- 月利率：除以30得到日利率
- 年利率：除以365得到日利率
适用场景：
- 股票短线交易（按日利率计算）
- 基金定投（按周/月利率计算）
- 长期投资（按年利率计算）
- 理财产品收益比较
document.addEventListener(\’DOMContentLoaded\’, function() {
// 初始化图表
const ctx = document.getElementById(\’growthChart\’).getContext(\’2d\’);
let growthChart = new Chart(ctx, {
type: \’line\’,
data: {
labels: [],
datasets: [{
label: \’投资增长趋势\’,
data: [],
backgroundColor: \’rgba(74, 111, 165, 0.2)\’,
borderColor: \’rgba(74, 111, 165, 1)\’,
borderWidth: 3,
pointBackgroundColor: \’rgba(255, 107, 107, 1)\’,
pointRadius: 4,
tension: 0.3
}]
},
options: {
responsive: true,
plugins: {
legend: {
display: false
},
tooltip: {
mode: \’index\’,
intersect: false,
callbacks: {
label: function(context) {
return `金额: ¥${context.parsed.y.toFixed(2)}`;
}
}
}
},
scales: {
x: {
title: {
display: true,
text: \’时间周期\’
}
},
y: {
title: {
display: true,
text: \’资产总额 (¥)\’
},
ticks: {
callback: function(value) {
return \’¥\’ value.toLocaleString();
}
}
}
}
}
});
// 标签切换功能
const tabs = document.querySelectorAll(\’.tab\’);
tabs.forEach(tab => {
tab.addEventListener(\’click\’, function() {
// 移除所有active类
tabs.forEach(t => t.classList.remove(\’active\’));
document.querySelectorAll(\’.tab-content\’).forEach(c => c.classList.remove(\’active\’));
// 添加active类到当前标签
this.classList.add(\’active\’);
const tabId = this.getAttribute(\’data-tab\’);
document.getElementById(`${tabId}-tab`).classList.add(\’active\’);
// 重新计算
calculateCompoundInterest();
});
});
// 计算复利函数
function calculateCompoundInterest() {
const principal = parseFloat(document.getElementById(\’principal\’).value);
const rate = parseFloat(document.getElementById(\’rate\’).value) / 100;
const rateType = parseInt(document.getElementById(\’rateType\’).value);
const frequency = parseInt(document.getElementById(\’frequency\’).value);
// 获取投资期限
let days = 0;
const activeTab = document.querySelector(\’.tab.active\’).getAttribute(\’data-tab\’);
switch(activeTab) {
case \’days\’:
days = parseInt(document.getElementById(\’days\’).value);
break;
case \’weeks\’:
days = parseInt(document.getElementById(\’weeks\’).value) * 7;
break;
case \’months\’:
days = parseInt(document.getElementById(\’months\’).value) * 30;
break;
case \’years\’:
days = parseInt(document.getElementById(\’years\’).value) * 365;
break;
}
// 将利率转换为日利率
const dailyRate = rate / rateType;
// 计算复利周期数
const periods = Math.floor(days / frequency);
// 计算最终金额
const amount = principal * Math.pow(1 dailyRate * frequency, periods);
// 计算其他结果
const interest = amount – principal;
const totalReturn = (interest / principal) * 100;
const annualReturn = (Math.pow(1 dailyRate * frequency, 365 / frequency) – 1) * 100;
// 更新结果
document.getElementById(\’finalAmount\’).textContent = \’¥\’ amount.toFixed(2).replace(/\\B(?=(\\d{3}) (?!\\d))/g, \”,\”);
document.getElementById(\’principalAmount\’).textContent = \’¥\’ principal.toFixed(2).replace(/\\B(?=(\\d{3}) (?!\\d))/g, \”,\”);
document.getElementById(\’interestEarned\’).textContent = \’¥\’ interest.toFixed(2).replace(/\\B(?=(\\d{3}) (?!\\d))/g, \”,\”);
document.getElementById(\’totalReturn\’).textContent = totalReturn.toFixed(2) \’%\’;
document.getElementById(\’annualReturn\’).textContent = annualReturn.toFixed(2) \’%\’;
// 更新复利频率文本
const frequencyText = document.getElementById(\’frequency\’).selectedOptions[0].text;
document.getElementById(\’frequencyResult\’).textContent = frequencyText;
// 更新利率类型文本
const rateTypeText = document.getElementById(\’rateType\’).selectedOptions[0].text;
document.getElementById(\’rateTypeResult\’).textContent = `${rateTypeText} ${rate.toFixed(2)}%`;
// 生成图表数据
const labels = [];
const data = [];
const steps = Math.min(20, periods); // 最多显示20个点
for (let i = 0; i {
document.getElementById(input).addEventListener(\’change\’, calculateCompoundInterest);
});
});