使用 js 实现贷款计算器功能

置顶小与哥

已于 2024-12-09 21:41:28 修改

阅读量5.7k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： js 文章标签： javascript

于 2017-02-07 16:37:57 首次发布

本文链接：https://blog.youkuaiyun.com/qq_23039605/article/details/54911772

js 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个简单的贷款计算器网页应用，用户可以输入贷款金额、年利率及偿还周期等信息，并实时计算出月供、总支付额和总利息。此外，还提供了一个可视化图表来展示贷款的偿还过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<table>
		<tr>
			<th>Enter Loan Data:</th>
			<td></td>
			<th>Loan Balance, Interest Payments</th>
		</tr>
		<tr>
			<td>Amount of Loan ($):</td>
			<td><input id="amount" onchange="calculate()"/></td>
			<td rowspan=8>
				<canvas id='graph' width=400 height=250></canvas>
			</td>
		</tr>
		<tr>
			<td>
				Annual interest(%):
			</td>
			<td><input id='apr' onchange="calculate()"/></td>
		</tr>
		<tr>
			<td>
				Repayments period(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>
			<td>
				Approximate payments:
			</td>
			<td><button onclick="calculate()">Calculate</button></td>
		</tr>
		<tr>
			<td>
				Monthly payment:
			</td>
			<td>$<span id="payment"></span></td>
		</tr>
		<tr>
			<td>
				Total payment:
			</td>
			<td>$<span id="total"></span></td>
		</tr>
		<tr>
			<td>
				Total interest:
			</td>
			<td>$<span id="totalinterest"></span></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<th>
				Sponsors:
			</th>
			<td colspan=2>Apply for your loan with one of these fine lenders:
			<div id="lenders"></div>
			</td>
		</tr>
	</table>
	
	<script>
		function calculate(){
			// 贷款金额			
			var amount = document.getElementById('amount');
			// 年利息
			var apr = document.getElementById('apr');
			// 偿还周期
			var years = document.getElementById('years');
			//var zipcode = document.getElementById('zipcode');
			// 每月支付
			var payment = document.getElementById('payment');
			// 总支付
			var total = document.getElementById('total');
			// 总利息
			var totalinterest = document.getElementById('totalinterest');
			
			// amount 贷款总额
			var principle = parseFloat(amount.value);
			// apr 年利率
			var interest = parseFloat(apr.value) /100 /12;
			// 偿还周期 月份
			var payments = parseFloat(years.value) * 12;
			// pow 求次幂
			var x = Math.pow(1 + interest, payments);
			// monthly 每月还款金额
			var monthly = (principle * x * interest) / (x-1);
			
			if(isFinite(monthly)){
				payment.innerHTML = monthly.toFixed(2);
				total.innerHTML = (monthly * payments).toFixed(2);
				totalinterest.innerHTML = (monthly * payments - principle).toFixed(2);
				
				// 保存数据到本地
				// save(amount.value, apr.value, years.value, zipcode.value);
				save(amount.value, apr.value, years.value, '');
				// 借贷人省略
				
				// 画图
				chart(principle, interest, monthly, payments);
			}else{ 
				payment.innerHTML = "";
				total.innerHTML = "";
				totalinterest.innerHTML = "";
				chart();
			}
		}
		
		function save(amount, apr, years, zipcode){
			if(window.localStorage){
				localStorage.loan_amount = amount;
				localStorage.loan_apr = apr;
				localStorage.loan_years = years;
				localStorage.loan_zipcode = zipcode;
			}
		}
		
		window.onload = function(){
			if(window.localStorage && localStorage.loan_amount){
				document.getElementById('amount').value = localStorage.loan_amount;
				document.getElementById('apr').value = localStorage.loan_apr;
				document.getElementById('years').value = localStorage.loan_years;
				//document.getElementById('zipcode').value = localStorage.loan_zipcode;
			}
		}
		
		function chart(principle, interest, monthly, payments){
			var graph = document.getElementById('graph');
			graph.width = graph.width;
			
			if(!graph.getContext) return;
			
			var g = graph.getContext('2d');
			
			var width = graph.width;
			var height = graph.height;
			
			// 画总利息
			function paymentToX(n){
				return n * width / payments;
			}
			function amountToY(a){
				return  height - a * height / (monthly * payments * 1.05);
			}
			g.moveTo(paymentToX(0), amountToY(0));
			g.lineTo(paymentToX(payments), amountToY(monthly * payments));
			g.lineTo(paymentToX(payments), amountToY(0));
			g.closePath();
			g.fillStyle = '#f88';
			g.fill();
			g.font = "bold 12px '微软雅黑'";
			//g.fillStyle = "yellow";
			g.fillText("Total interest payments", 20, 20);			
			
			// 画净值
			var equity = 0;
			g.beginPath();
			g.moveTo(paymentToX(0), amountToY(0));
			
			for( var p = 1; p<=payments; p++){
				var thisMonthsInterest = (principle - equity) * interest;
				equity += (monthly - thisMonthsInterest);
				g.lineTo(paymentToX(p), amountToY(equity));
			}	
			
			g.lineTo(paymentToX(payments), amountToY(0));
			g.fillStyle = 'green';
			g.fill();
			g.fillText('Total Equity', 20, 35);
			
			//画余额
			var bal = principle;
			g.beginPath();
			g.moveTo(paymentToX(0), amountToY(bal));
			for(var p=1; p<payments;p++){
				var thisMonthsInterest = bal*interest;
				bal-= (monthly - thisMonthsInterest);
				g.lineTo(paymentToX(p), amountToY(bal));
			}
			g.lineWidth = 3;
			g.fillStyle='black';
			g.stroke();
			g.fillText("Loan Balance", 20, 50);
			
			//将年度数据在X轴做标记
			g.textAlign = 'center';
			var y = amountToY(0);
			for(var year=1; year*12<=payments;year++){
				var x = paymentToX(year*12);
				g.fillRect(x-0.5, y-3, 1, 3);
				if(year ==1){
					g.fillText("Year",x,y-5);
				}
				if(year % 5==0 && year*12 !== payments){
					g.fillText(String(year),x,y-5);
				}
			}
			//将赔付数额标记在右边界
			g.textAlign = "right";
			g.textBaseline = "middle";
			var ticks = [monthly*payments, principle];
			var rightEdge = paymentToX(payments);
			for(var i=0;i<ticks.length;i++){
				var y = amountToY(ticks[i]);
				g.fillRect(rightEdge -3, y-0.5,3,1);
				g.fillText(String(ticks[i].toFixed(0)), rightEdge-5, y);
			}
			
		}
		
		
		
		
		
	</script>	
</body>
</html>

示例图片如下：
这里写图片描述