用JavaScript制作一个贷款计算器（注：附带详细注释）

最新推荐文章于 2023-11-17 10:46:51 发布

折痕的博客日记

最新推荐文章于 2023-11-17 10:46:51 发布

阅读量2.1k

点赞数 1

文章标签： css html javascript

本文链接：https://blog.csdn.net/qq_44108944/article/details/116431580

版权

一个贷款计算器Web应用

提示：该例子集中使用了诸多技术，展示了真实环境下的客户端JavaScript（包括HTML和CSS）编程。

文章目录

- 一个贷款计算器Web应用
前言
- 图1-1
一、主要功能点：
二、代码实现
总结

前言

tips：在看代码之前应该先阅读本段文字。你不需要理解所有内容，代码中有着完整的注释，至少你应该能正确运行这段代码得到如图1-1所示的界面。这里的例子展示了诸多JavaScript语言核心特性，同样展示了重要的客户端JavaScript技术：

在这里插入图片描述

图1-1

一、主要功能点：

如何在文档中查找元素
如何通过表单input元素来获取用户的输入数据
如何通过文档元素来设置HTML内容
如何将数据存储在浏览器中
如何使用脚本发起HTTP请求
如何利用元素绘图

二、代码实现

1.HTML

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用JavaScript实现贷款计算器</title>
	</head>
	<body>
		<table>
			<tr>
				<th>输入贷款数据 :</th>
				<td></td>
				<th>贷款余额,累计权益,利息支出</th>
			</tr>
			<tr>
				<td>贷款金额 ($):</td>
				<td><input id="amount" onchange="calculate();"></td>
				<td rowspan="8">
					<canvas id="graph" width="400" height="250"></canvas>
				</td>
			</tr>
			<tr>
				<td>年利率 (%):</td>
				<td><input id="apr" onchange="calculate();"></td>
			</tr>
			
			<tr>
				<td>偿还期限 (years):</td>
				<td><input id="years" onchange="calculate();"></td>
			</tr>
			<tr>
				<td>Zipcode (to find lenders):</td>
				<td><input id="zipcode" onchange="calculate();"></td>
			</tr>
			<tr>
				<th>支付金额 :</th>
				<td><button onclick="calculate();">Calculate</button></td>
			</tr>
			<tr>
				<td>每月的付款 :</td>
				<td>$<span class="output" id="payment"></span></td>
			</tr>
			<tr>
				<td>总付款 :</td>
				<td>$<span class="output" id="total"></span></td>
			</tr>
			<tr>
				<td>总利息 :</td>
				<td>$<span class="output" id="totalinterest"></span></td>
			</tr>
			<

最低0.47元/天解锁文章