欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-04 14:03:37
...
<!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脚本实现贷款计算器功能(代码全)的详细内容,更多请关注其它相关文章!