使用 JavaScript 设计贷款计算器(1)

📌 相关文章

📜 使用 JavaScript 设计贷款计算器(1)

📅 最后修改于: 2023-12-03 15:06:47.788000 🧑 作者: Mango

使用 JavaScript 设计贷款计算器

本文将介绍如何使用 JavaScript 设计一个简单的贷款计算器，包括计算每月还款金额、总还款额以及还款总利息等功能。

前置知识

在开始设计贷款计算器之前，需要掌握 HTML、CSS 和 JavaScript 基础知识。如果你还不熟悉这些知识，可以先学习相关教程。

设计思路

贷款计算器主要包括两个部分：输入和输出。输入部分包括贷款本金、年利率和贷款期限，输出部分包括每月还款金额、总还款额和还款总利息。

实现的主要思路如下：

从 HTML 页面中获取输入元素，如贷款本金、年利率和贷款期限的输入框。
给输入框绑定事件监听器，当输入框的值发生改变时，触发计算函数。
在计算函数中，根据输入的贷款本金、年利率和贷款期限，计算每月还款金额、总还款额和还款总利息，并将结果显示到输出元素中。计算公式如下：

每月还款金额=（贷款本金×月利率×（1+月利率）^还款期数）÷（（1+月利率）^还款期数-1）

总还款额=每月还款金额×还款期数

还款总利息=总还款额-贷款本金

将计算结果格式化为货币格式，并显示到输出元素中。

代码实现

以下是完整的代码实现，包括 HTML、CSS 和 JavaScript 部分。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>贷款计算器</title>
	<style>
		label {
			display: block;
			margin-bottom: 10px;
		}
		input {
			width: 100%;
			padding: 5px;
			font-size: 16px;
			border: 1px solid #ccc;
			border-radius: 3px;
			box-sizing: border-box;
		}
		button {
			margin-top: 10px;
			padding: 10px 20px;
			font-size: 16px;
			background-color: #008CBA;
			color: #fff;
			border: none;
			border-radius: 3px;
			cursor: pointer;
		}
		.output {
			margin-top: 10px;
			padding: 10px;
			font-size: 16px;
			border: 1px solid #ccc;
			border-radius: 3px;
			box-sizing: border-box;
		}
	</style>
</head>
<body>
	<h1>贷款计算器</h1>
	<form id="calculator">
		<label>
			贷款本金
			<input type="number" id="principal" required>
		</label>
		<label>
			年利率
			<input type="number" id="rate" required>
		</label>
		<label>
			贷款期限（年）
			<input type="number" id="term" required>
		</label>
		<button type="submit">计算</button>
	</form>
	<div id="result" class="output"></div>

	<script>
		// 获取输入元素
		const principal = document.getElementById('principal');
		const rate = document.getElementById('rate');
		const term = document.getElementById('term');
		const form = document.getElementById('calculator');
		const result = document.getElementById('result');

		// 给输入框绑定事件监听器
		form.addEventListener('submit', e => {
			e.preventDefault();
			// 计算每月还款金额、总还款额和还款总利息
			const p = parseFloat(principal.value);
			const r = parseFloat(rate.value) / 1200;
			const n = parseFloat(term.value) * 12;
			const monthlyPayment = p * r * (Math.pow(1 + r, n)) / (Math.pow(1 + r, n) - 1);
			const totalPayment = monthlyPayment * n;
			const totalInterest = totalPayment - p;

			// 格式化为货币格式
			const formatter = new Intl.NumberFormat('zh-CN', {
				style: 'currency',
				currency: 'CNY',
				minimumFractionDigits: 2
			});

			// 将结果显示到输出元素中
			result.innerHTML = `
				每月还款金额：${formatter.format(monthlyPayment)}
				<br>
				总还款额：${formatter.format(totalPayment)}
				<br>
				还款总利息：${formatter.format(totalInterest)}
			`;
		});
	</script>
</body>
</html>

代码中的注释已经详细解释了代码的实现。其中，使用了 addEventListener() 方法来给表单绑定 submit 事件，当用户提交表单时，会触发计算函数。计算函数中，使用了 parseFloat() 方法来将输入的字符串转为浮点数，然后使用 JavaScript 的 Math 对象中的方法进行计算。最后，使用 Intl.NumberFormat() 方法将结果格式化为货币格式。