: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;
}
}

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);
});
});