当前位置 博文首页 > Jet_Lover的博客:一个JavaScript实现的贷款计算器

    Jet_Lover的博客:一个JavaScript实现的贷款计算器

    作者:[db:作者] 时间:2021-07-05 13:07

    基于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="lenders"></div>
            </td>
        </tr>
    </table>
    

    CSS部分

     #myTable{
                margin: auto;         //居中
            }
            .output{
                font-weight: bolder;   //计算结果定义为粗体
            }
            #payment{
                text-decoration: underline;  //定义id为payment的元素样式
            }
            #graph{
                border: solid black 1px;     //图表有一个1像素的边框
            }
            th td{
                vertical-align: top;        //表格单元与其对齐方式为顶端对齐
            }
    

    JS部分

    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');
    
        // amount 贷款总额
        var principle = parseFloat(amount.value);
        // apr 年利率
        var interest = parseFloat(apr.value) /100 /12;
        // 偿还周期 月份
        var payments = parseFloat(years.value) * 12;
    
        // pow 求次幂
        var x = Math.pow(1 + interest, payments);
        // monthly 每月还款金额
        var 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, zipcode.value);
    
            // 借贷人,忽略网络错误
            try{
                getLenders(amount.value, apr.value, years.value, zipcode.value);
            }
            catch (e) {
                //忽略异常
            }
            // 画图
            chart(principle, interest, monthly, payments);
        }else{
            //计算结果不是数字或者无穷大,意味着输入数据是非法或不完整的
            //清空数据
            payment.innerHTML = "";
            total.innerHTML = "";
            totalinterest.innerHTML = "";
            chart();
        }
    }
    //将用户输入保存至localSorage对象的属性中
    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.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('zipcode').value = localStorage.loan_zipcode;
        }
    }
    
    //将用户的输入发送至服务器上
    function getLenders(amount,apr,years,zipcode) {
        //如果浏览器不支持XMLHttpRequest对象,则退出
        if(!window.XMLHttpRequest) return;
    
        //找到要显示放贷人列表的元素
        var ad =document.getElementById("lenders");
        if(!ad) return; //如果为空则退出
    
        //将用户的输入数据进行URL编码,并将查询参数附加在URL里
        var url ="getLenders.php" + //处理数据的URL地址
        "?amt="+
    
    下一篇:没有了