第一章 JavaScript概述_graph.width=graph.width怎么重置画布的-优快云博客

本文链接：https://blog.youkuaiyun.com/zhengken1991/article/details/29366107

本文介绍了使用JavaScript创建贷款计算器的过程，包括HTML5元素的应用、数据输入验证、贷款计算公式修正及图表绘制。

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

1.JS是一门高端的、动态的、弱类型的编程语言。

2.JS除了与JAVA语法类似外，是完全不同的两种编程语言。

3.在基于JavaScript实现的贷款计算器案例中，接触到了以下的HTML5元素或者新的属性：

Canvas
window.localStorage

在原书中的案例中有一处错了，具体在代码里面

<pre name="code" class="html"><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>基于Javascript实现的贷款计算器</title>
<style>
.output {
	font-weight: bold;
}
#payment {
	text-decoration: underline;
}
#graph {
	border: solid black 1px;
}
th, td {
	vertical-align: top;
}
</style>
</head>

<body>
<table>
  <tr>
    <th>Enter Loan Data:</th>
    <td></td>
    <th>Loan Balance, Cumulative Equity, and Interest Payments</th>
  </tr>
  <tr>
    <td>Amount of the 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>Repayment 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>
    <th>Approximate Payments:</th>
    <td><button onClick="calculate();">Calculate</button></td>
  </tr>
  <tr>
    <td>Monthly Payments:</td>
    <td>$<span id="payment" class="output"></span></td>
  </tr>
  <tr>
    <td>Total Payments:</td>
    <td>$<span id="total" class="output"></span></td>
  </tr>
  <tr>
    <td>Total interest:</td>
    <td>$<span id="totalinterest" class="output"></span></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>
"use strict"
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");
	
	var principal=parseFloat(amount.value);  //parseFloat() 函数可解析一个字符串，并返回一个浮点数
	var interest=parseFloat(apr.value) / 100 / 12;
	var payments=parseFloat(years.value) * 12;
	
	//原书是这样的var monthly = (principal*x*interest)/(x-1);
	//我认为是错误的，这是计算每个月的利息，后来我在官方的勘误表，也有人发现这个错误
	//http://www.oreilly.com/catalog/errataunconfirmed.csp?isbn=9780596805531
	var x=Math.pow(1+interest, payments);
	var monthly=(principal*x) / payments;   
	
	if(isFinite(monthly)){
		payment.innerHTML=monthly.toFixed(2);
		total.innerHTML=(monthly*payments).toFixed(2);
		totalinterest.innerHTML=((monthly*payments)-principal).toFixed(2);
		save(amount.value, apr.value, years.value, zipcode.value);
	
		try{
			getLenders(amount.value, apr.value, years.value, zipcode.value);
			}
		catch(e){}
		
		chart(principal, 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.οnlοad=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(principal, interest, monthly, payments)
	{
		var graph=document.getElementById("graph");
		graph.width=graph.width;	//用一种巧妙的手法清除并重置画布
		
		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 sans-serif";               
		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 = (principal-equity)*interest;
			equity += (monthly - thisMonthsInterest);  
			g.lineTo(paymentToX(p),amountToY(equity)); 
		}
		g.lineTo(paymentToX(payments), amountToY(0));  
		g.closePath();                               
		g.fillStyle = "green";                         
		g.fill();                                    
		g.fillText("Total Equity", 20,35);             
	
		
		var bal = principal;
		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.stroke();                                  
		g.fillStyle = "black";                         
		g.fillText("Loan Balance", 20,50);            
	
		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, principal];     
		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>