当前位置:Gxlcms > JavaScript > javascript脚本实现贷款计算器功能(代码全)

javascript脚本实现贷款计算器功能(代码全)

时间:2021-07-01 10:21:17 帮助过:32人阅读

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>javascript学习</title>
        <style>
            .output {
                font-weight: bold;
            }
            #payment {
                text-decoration: underline;
            }
            #graph {
                border: solid black 1px;
            }
            th,td {
                vertical-align: top;
            }
        </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="400" 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 payment:
                </td>
                <td>
                    $
                    <span class="output" id="payment">
                    </span>
                </td>
            </tr>
            <tr>
                <td>
                    Total payment:
                </td>
                <td>
                    $
                    <span class="output" id="total">
                    </span>
                </td>
            </tr>
            <tr>
                <td>
                    Total interest:
                </td>
                <td>
                    $
                    <span class="output" id="totalinterest">
                    </span>
                </td>
            </tr>
            <tr>
                <th>Sponsors:</th>
                <td colspan=2>
                    Apply for your loan with one of these fine lenders:
                    <p id="lenders">
                    </p>
                </td>
            </tr>
        </table>
        <script>
        'use strict';
        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');
            // 将百分比格式转化为小数格式,并从年利率转化为月利率  将年度赔付转化为月度赔付
            var principal = parseFloat(amount.value);
            var interest = parseFloat(apr.value) / 100 / 12;
            var payments = parseFloat(years.value) * 12;
            // 计算月度赔付的数据
            var x = Math.pow(1 + interest, payments);
            var monthly = (principal * x * interest) / (x - 1);
            // 如果没超过js可以表示的数字范围,并且用户输入正确
            if (isFinite(monthly)) {
                payment.innerHTML = monthly.toFixed(2);
                total.innerHTML = (monthly * payments).toFixed(2);
                totalinterest.innerHTML = ((monthly * payments) - principal).toFixed(2);
                // 将用户的输入数据保留,下次访问也能取道数据
                save(amount.value, apr.value, years.value, zipcode.value);
                // 找到并展示本地放贷人,但忽略网络错误
                try {
                    getLenders(amount.value, apr.value, years.value, zipcode.value);
                } catch (e) {

                }
                chart (principal, interest, monthly, payments);
            } else {
                payment.innerHTML = '';
                total.innerHTML = '';
                totalinterest.innerHTML = '';
                chart();
            }
        }
        function save(amount, apr, years, zipcode) {
            if (window.localStorage) {
                localStorage.loan_amount = amount;
                localStorage.loan_apr = apr;
                localStorage.loan_years = years;
                localStorage.loan_zipcode = amount;
            }
        }
        // 文档首次加载时,将会尝试还原输入字段
        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) {
            if (!window.XMLHttpRequest)
                return;
            var ad = document.getElementById('lenders');
            if (!ad)
                return;
            // 用户输入的数据进行url编码,并作为查询参数附加在url中
            var url = 'getLenders.php' + '&?amt=' + encodeURIComponent(amount) + '&?apr=' + encodeURIComponent(apr) + '&?yrs=' + encodeURIComponent(years) + '&zip=' + encodeURIComponent(zipcode);
            // 通过xml对象提取返回数据
            var req = new XMLHttpRequest();
            req.open('GET', url);
            req.send(null);
            // 在返回数据之前,注册一个事件处理函数,这个处理函数在服务器响应返回客户端的时候调用
            req.onreadystatechange = function () {
                if (req.readyState === 4 && req.status === 200) {
                    var response = req.responseText;
                    var lenders = JSON.parse(response);
                    for (var i = 0; i < lenders.length; i++) {
                        list += "<li><a href='" + lenders[i].url + "'>" + lenders[i].name + "</a>";
                    }
                    ad.innerHTML = "<ul>" + list + "</ul>";
                }
            }
        }
        // 在html的<canvas>中用图表展示月度贷款余额、利息和资产收益
        // 如果不传入参数的话,则清空之前的图表数据
        function chart(principal, interest, monthly, payments){
            var graph = document.getElementById('graph');
            graph.width = graph.width; //清除并重置画布
            if (arguments.length === 0 || !graph.getContext)
                return;
            // 获得画布元素的‘context’对象,这个对象定义了一组绘画api
            var g = graph.getContext('2d');
            var width = graph.width;
            var height = graph.height;
            // 将付款数字和美元数字转化为像素
            function paymentToX(n) {
                return n * width / payments;
            }
            function amountToY(a) {
                return height - (a * height / (monthly * payments * 1.05));
            }
            g.moveTo(paymentToX(0), amountToY(0));
            g.lineTo(paymentToX(payments), amountToY(monthly * payments));
            g.lineTo(paymentToX(payments), amountToY(0));
            g.closePath();
            g.fillStyle = '#f88';
            g.fill();
            g.font = 'blod 12px sans-serif';
            g.fillText('Total Interest Payments', 20, 20);

            var equity = 0;
            g.beginPath();
            g.moveTo(paymentToX(0), amountToY(0));
            for (var p = 1; p <= payments; p++) {
                var thisMonthsInterest = (principal - equity) * interest;
                equity += (monthly - thisMonthsInterest);
                g.lineTo(paymentToX(p), amountToY(equity));
            }
            g.lineTo(paymentToX(payments), amountToY(0));
            g.closePath();
            g.fillStyle = 'green';
            g.fill();
            g.fillText('Total Equity', 20, 35);
            // 再次循环,余额数据显示为黑色粗线条
            var bal = principal;
            g.beginPath();
            g.moveTo(paymentToX(p), amountToY(bal));
            for (var p = 0; p < payments; p++) {
                var thisMonthsInterest = bal * interest;
                bal -= (monthly - thisMonthsInterest);
                g.lineTo(paymentToX(p), amountToY(bal));
            }
            g.lineWidth = 3;
            g.stroke();
            g.fillStyle = 'black';
            g.fillText('Loan Balance', 20, 50);
            // 将年度数据在x轴做标记

            g.textAlign = 'center';
            var y = amountToY(0);
            for (var year = 1; year * 12 <= payments; year++) {
                var x = paymentToX(year * 12);
                g.fillRect(x - 0.5, y - 3, 1, 3);
                if (year === 1)
                    g.fillText('Year', x, y - 5);
                if (year % 5 === 0 && year * 12 !== payments)
                    g.fillText(String(year), x, y - 5);
            }
            g.textAlign = 'right';
            g.textBaseline = 'middle';
            var ticks = [monthly * payments, principal];
            var rightEdge = paymentToX(payments);
            for (var i = 0; i < ticks.length; i++) {
                var y = amountToY(ticks[i]);
                g.fillRect(rightEdge - 3, y - 0.5, 3, 1);
                g.fillText(String(ticks[i].toFixed(0)), rightEdge - 5, y);
            }
        }
        </script>
    </body>
</html>

相关文章:

纯javascript代码实现计算器功能(三种方法)

javascript如何实现计算器功能

相关视频:

网页版计算器-8天学会 javascript视频教程

以上就是javascript脚本实现贷款计算器功能(代码全)的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行