正文

轻松掌握复利计算：制作JS复利计算器，并附上直观统计图教程

/0 浏览量
0818

在这个数字化时代，理解复利的概念对于财务规划和个人投资至关重要。复利是指利息在每期计算时都包含上期的利息，从而产生利上加利的效应。为了帮助大家更好地理解复利，本文将提供一个简单的JavaScript复利计算器示例，并介绍如何使用HTML和JavaScript结合图表库来展示复利增长的趋势。

复利计算器基础

首先，我们需要了解复利计算的公式：

[ A = P \times (1 + r/n)^{nt} ]

其中：

  • ( A ) 是未来值，即投资到期后的总金额。
  • ( P ) 是本金。
  • ( r ) 是年利率（小数形式）。
  • ( n ) 是每年计息次数。
  • ( t ) 是投资时间（年）。

创建复利计算器

以下是一个简单的HTML和JavaScript代码示例，用于创建一个复利计算器。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复利计算器</title>
<script>
function calculateCompoundInterest() {
    var principal = parseFloat(document.getElementById("principal").value);
    var rate = parseFloat(document.getElementById("rate").value) / 100;
    var time = parseFloat(document.getElementById("time").value);
    var times = parseFloat(document.getElementById("times").value);
    var compoundInterest = principal * Math.pow((1 + rate / times), times * time);
    document.getElementById("result").innerText = "复利总额: " + compoundInterest.toFixed(2);
}
</script>
</head>
<body>
<h2>复利计算器</h2>
<label for="principal">本金 ($):</label>
<input type="number" id="principal" placeholder="输入本金">
<br>
<label for="rate">年利率 (%):</label>
<input type="number" id="rate" placeholder="输入年利率">
<br>
<label for="time">投资时间 (年):</label>
<input type="number" id="time" placeholder="输入时间">
<br>
<label for="times">每年计息次数:</label>
<input type="number" id="times" placeholder="输入次数">
<br>
<button onclick="calculateCompoundInterest()">计算</button>
<p id="result"></p>
</body>
</html>

这段代码创建了一个简单的复利计算器，用户可以输入本金、年利率、投资时间和每年计息次数，点击计算按钮后，会在页面上显示计算结果。

使用图表展示复利增长

为了更直观地展示复利增长，我们可以使用JavaScript图表库，如Chart.js，来绘制复利增长的图表。

首先，确保你的HTML文件中包含了Chart.js库的链接：

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

然后，你可以使用以下代码来创建一个图表：

<canvas id="compoundInterestChart" width="400" height="400"></canvas>
<script>
function drawChart() {
    var principal = parseFloat(document.getElementById("principal").value);
    var rate = parseFloat(document.getElementById("rate").value) / 100;
    var time = parseFloat(document.getElementById("time").value);
    var times = parseFloat(document.getElementById("times").value);

    var ctx = document.getElementById('compoundInterestChart').getContext('2d');
    var chart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: Array.from({length: time}, (_, i) => i + 1),
            datasets: [{
                label: '复利总额',
                data: Array.from({length: time}, (_, i) => principal * Math.pow((1 + rate / times), times * (i + 1))),
                fill: false,
                borderColor: 'rgb(75, 192, 192)',
                tension: 0.1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: false
                }
            }
        }
    });
}

document.getElementById("result").addEventListener("click", drawChart);
</script>

这段代码会在计算结果旁边创建一个图表，展示随时间增长的复利总额。

通过以上步骤，你不仅能够创建一个复利计算器，还能通过图表直观地看到复利增长的效果。这对于理解复利的强大力量以及如何通过复利增加财富非常有帮助。

-- 展开阅读全文 --