<style>
.result{font-weight:bold;}
.output { font-weight: bold; }
#payment { text-decoration: underline; }
#graph { border: solid black 1px; }
th, td { vertical-align: top; }
</style>
<body>
<table>
<tr>
<th>贷款信息:</th>
<td></td>
<th>Loan Balance, Cumulative Equity, and Interest Payments</th>
</tr>
<tr>
<td>Amount of the loan ($):</td>
<td><input name="amount" ></td>
<td rowspan=8>
<canvas id="graph" width="400" height="250"></canvas>
</td>
</tr>
<tr>
<td>Annual interest (%):</td>
<td><input name="apr" onchange="calculate()"></td>
</tr>
<tr>
<td>Repayment period (years):</td>
<td><input name="years" onchange="calculate()"></td>
<tr>
<td>邮政编码 (to find lenders):</td>
<td><input name="zipcode" onchange="calculate()"></td>
<tr>
<th>Approximate Payments:</th>
<td><button class="approximate">Calculate</button></td>
</tr>
<tr>
<td>Monthly payment:</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>
<tr>
<th>合资人:</th>
<td colspan=2>
向贷款人申请贷款:
<div class="lenders"></div>
</td>
</tr>
</table>
</body>
<script>
"user strict"
let approximate =document.querySelector(".approximate");
approximate.addEventListener("click",calculate);
function calculate(){
console.log("hello");
let amount = document.querySelector("[name='amount']");
let apr = document.querySelector("[name='apr']");
let years = document.querySelector("[name='years']");
let payment = document.querySelector("#payment");
let total = document.querySelector("#total");
let totalinterest = document.querySelector("#totalinterest");
let price = parseFloat(amount.value);
let interest = parseFloat(apr.value)/100/12;
let payments = parseFloat(years.value)*12;
let x = Math.pow(1+interest,payments);
let mountly = (price*x*interest)/(x-1);
let zipcode = document.querySelector("[name='zipcode']");
if (isFinite(mountly)) {
payment.innerHTML = mountly.toFixed(2);
total.innerHTML = (mountly * payments).toFixed(2);
totalinterest.innerHTML = (mountly * payments - price).toFixed(2);
save(amount.value, apr.value, years.value, zipcode.value);
try {
}
catch {
}
chart(price, interest, mountly, payments)
}else{
payment.innerHTML = "";
total.innerHTML = "";
totalinterest.innerHTML="";
chart();
};
function chart(price,interest,mountly,payments){
let graph = document.getElementById("graph");
graph.width = graph.width;
if(arguments.length==0||!graph.getContext("2d")) return Error;
let g = graph.getContext("2d");
let width = graph.width,height=graph.height;
function paymentsToX(n){
return n*width/payments;
};
function paymentsToY(a){
return height-(a*height/(mountly*payments*1.05));
};
g.moveTo(paymentsToX(0),paymentsToY(0));
g.lineTo(paymentsToX(payments),paymentsToY(mountly*payments));
g.lineTo(paymentsToX(payments),paymentsToY(0));
g.closePath();
g.fillStyle = "#f88";
g.fill();
g.font = "bold 12px sans-serif";
g.fillText("total interest payments",20,20);
let equit = 0;
g.closePath();
g.moveTo(paymentsToX(0),paymentsToY(0));
for(let i=0;i<payments;i++){
let thisMonthlyinterest = (price-equit)*interest;
equit+=(mountly-thisMonthlyinterest);
g.lineTo(paymentsToX(i),paymentsToY(equit));
};
g.lineTo(paymentsToX(payments),paymentsToY(0));
g.closePath();
g.fillStyle="green";
g.fill();
g.fillText("total equit",20,35);
let pri = price;
g.beginPath();
g.moveTo(paymentsToX(0),paymentsToY(pri));
for(let i=0;i<payments;i++){
let thisMonthinterest = pri*interest;
pri-=(mountly-thisMonthinterest);
g.lineTo(paymentsToX(i),paymentsToY(pri));
};
g.lineWidth=3;
g.stroke();
g.fillStyle="black";
g.fillText("lone balance",20,50);
g.textAlign = "center";
let y= paymentsToY(0);
for(let j=0;j*12<=payments;j++){
let x = paymentsToX(j*12);
g.fillRect(x-0.5,y-3,1,3);
if(j==1)g.fillText("Year",x,y-5);
if(j%5 == 0&& j*12 !== payments){
g.fillText(String(j),x,y-5);
};
};
};
};
</script>
学习学的很长时间没更了,在这分享的例子有很多不完善的地方,只是用来和大家一起学习用的,后我还会继续分享各种好的js例子,当然有愿意的也可以分享给大家,大家一起学习。下面的是效最终效果图。当然这里用到了canvas就是这里的计算有点东西其他的只需要记住作用就行了。