一个JavaScript实现的贷款计算器

基于JavaScript实现的贷款计算器

本文实现的技术：

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

先看成果

HTML部分

<table id="myTable">
    <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>
            还款期(年):
        </td>
        <td><input id='years' onchange="calculate()"/></td>
    </tr>
    <tr>
        <td>
            邮政编码(查找贷方):
        </td>
        <td><input id='zipcode' onchange="calculate()"/></td>
    </tr>
    <tr>
        <td>
            接近付款:
        </td>
        <td><button onclick="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>
    <tr>
        <th>
            赞助商:</th><td colspan=2>
               向这些优秀的贷款人申请贷款:
            <div id="lender