用JS实现的一个贷款计算器

最终实现的效果，如图

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='firstPut' onchange="calculate()" /></td>
        </tr>
        <tr>
            <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>
    </table>

CSS

        #myTable {
            margin: auto;
        }

        .output {
            font-weight: bolder;
        }

        #payment {
            text-decoration: underline;
        }

        #graph {
            border: solid black 1px;
        }

        th td {
            vertical-align: top;
        }

        button {
            cursor: pointer;
        }

JS

    function calculate() {
        // 贷款金额
        let amount = document.getElementById('amount');
        // 年利息
        let apr = document.getElementById('apr');
        // 还款期
        let years = document.getElementById('years');
        // 首期付款
        let firstPut = document.getElementById('firstPut');
        if (firstPut.value == "") {
            firstPut.value = 0
        }  //没有输出则默认首期付款为0
        // 每月支付
        let payment = document.getElementById('payment');
        // 总支付
        let total = document.getElementById('total');
        // 总利息
        let totalinterest = document.getElementById('totalinterest');


        // firstPutMoney 首期付款金额
        let firstPutMoney = parseFloat(firstPut.value);
        // amount 贷款总额
        let principle = parseFloat(amount.value) - firstPutMoney;
        // apr 年利率
        let interest = parseFloat(apr.value) / 100 / 12;
        // 偿还周期 月份
        let payments = parseFloat(years.value) * 12;

        // pow 求次幂
        let x = Math.pow(1 + interest, payments);
        // monthly 每月还款金额
        let 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, firstPut.value);

            // 画图
            chart(principle, interest, monthly, payments);
        } else {
            //计算结果不是数字或者无穷大，意味着输入数据是非法或不完整的
            //清空数据
            payment.innerHTML = "";
            total.innerHTML = "";
            totalinterest.innerHTML = "";
            chart();
        }
    }
    //将用户输入保存至localSorage对象的属性中
    function save(amount, apr, years, firstPut) {
        if (window.localStorage) { //只有支持的浏览器才能运行这个代码
            localStorage.loan_amount = amount;
            localStorage.loan_apr = apr;
            localStorage.loan_years = years;
            localStorage.loan_firstPut = firstPut;
        }
    }
    //文档首次加载的时，将会尝试还原输入字段
    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('firstPut').value = localStorage.loan_firstPut;

            calculate() //如果有值则自动计算
        }
    }

    //在HTML<canvas>元素中用图表展示贷款余额、利息和资产收益
    //如果不传参的话则清空之前图表数据
    function chart(principle, interest, monthly, payments) {