本例子,来自《JavaScript权威指南》
源代码如下:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Loan Calculator</title>
<style>
.output{font-weight:bold;}
#payment{text-decoration:underline;}
#graph{border:solid black 1px;}
th,td{vertical-align:center;}
</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='470' 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>
<td>Approximate Payments:</td>
<td><button onclick='calculate();'>Calculate</button></td>
</tr>
<tr>
<td>Monthly Payments:</td>
<td>$<span class='output' id='payment'