今天花了两个小时模仿书上代码用JS制作了JavaScript贷款计算器，时间有些长，但相比以前，自己细心了不少，每天进步一点点，量的积累达到质的飞跃

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.output{
    font-weight:bold;}
#payment{
    text-decoration:underline;}
#graph{
    border:1px solid black;}
th,td{
    vertical-align:top;}
</style>
<script type="text/javascript">
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");
    
    //假设输入合法将从input元素中获取输入数据
    //将百分比格式转换为小数格式，且从年利率转换为月利率
    //将年度赔付转换为月度赔付
    var principle=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=(principle * x * interest)/(x-1);

//如果结果没有超过javascript能表示的数字范围，且用户的输入也正确
      //这里所展示的结果就是合法的
    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{
                     //计算结果不是数字或者无穷大，意味着输入的数据是非法的或是不完整的
                     //清空之前的输出数据
                    payments.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=zipcode;
            }
        }
        
        window.οnlοad=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;
                var url="getLenders.php"+"?amt=" +encodeURIComponent(amount)+"&apr="+encodeURIComponent(apr)+"&yrs="+encodeURIComponent(years)+"&zip="+encodeURIComponent(zipcode);
                
                //通过XMLHttpRequest对象来提取返回数据
                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);
                        var list="";
                        for(var i=0;i<lenders.length;i++){
                            list +="<li><a href='" + lenders[i].url +"'>" +lenders[i].name +"</a>";
                            }
                            ad.innerHTML="<ul>" + list + "</ul>";
                        }
                    }
                }
                
                function chart(principle,interest,monthly,payments){
                    var graph=document.getElementById("graph");
                    graph.width=graph.width;//清除且重置画布
                    //若不传入参数，或浏览器不返回，则直接返回
                    if(arguments.length==0 || !graph.getContext) return;
                    var g=graph.getContext("2d");
                    var width=graph.width,
                    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(payments * monthly));
                        g.lineTo(paymentToX(payments),amountToY(0));
                        g.closePath();
                        g.fillStyle="#f88";
                        g.fill();
                        g.font="12 bold sans-serif";
                        g.fillText("Total Interest Payment",20,20);
                        
                        var equity=0;
                        g.beginPath();
                        g.moveTo(paymentToX(0),amountToY(0));
                        for(var p=1;p<=payments;p++){
                            var thisMonthsInterest=(principle-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=principle;
                            g.beginPath();
                            g.moveTo(paymentToX(0),amountToY(bal));
                            for(var p=1;p<=payments;i++){
                                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);
                                
                                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(Sring(year),x,y-5);
                                    }
                                    
                                    //将赔付的金额标记在右边界
                                    g.textAlign="right";//文字右对齐
                                    g.textBaseline="middle";//文字垂直对其
                                    var ticks=[monthly * payments,principle];//所用的两个点
                                    var rightEdge=paymentToX(payments);//设置X坐标
                                    for(var i=0;i<ticks.length;i++){//对每两个大做循环
                                        var y=amountToY(ticks[i]);//计算每个标记的Y轴坐标
                                        g.fillRect(rightEdge-3,y-0.5,3,1);//绘制标记
                                        g.fillText(String(ticks[i].toFixed(0)),rightEdge-5,y);//绘制文本
                                        }
                    }
</script>
</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><td>Zipcode(to find lenders):</td>
<td><input id="zipcode" onChange="calculate();"></td>
<tr><th>Approximate Payments:</th>
<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:
<div id="lenders"></div>
</td>
</tr>
</tr>
</tr>
</table>
</body>
</html>

效果图：

转载于:https://www.cnblogs.com/taodan/p/4055616.html

JavaScript贷款计算器相关推荐

  1. JavaScript - 贷款计算器

    前言 在JavaScript权威指南一书中,有贷款计算器一例. 书中有很多低级错误(我应该是盗版-),经过一些修改,它成功完成了贷款计算,我把源码放到这里,记录一下. HTML代码 <!DOCT ...

  2. 一个JavaScript贷款计算器

    知识点:1.通过表单input元素来获取用户输入的数据 2.将数据存储在浏览器之中 3.通过文档元素来设置HTML内容 4.使用脚本发起HTTP请求 5.利用canvas元素绘图 先上效果图: 源代码 ...

  3. Javascript权威指南——第一章Javascript概述

    示例:javascript贷款计算器 相关技术: 1.如何在文档中查找元素: 2.如何通过表单input元素来获取用户的输入数据: 3.如何通过文档元素来设置HTML内容: 4.如何将数据存储在浏览器 ...

  4. 一个JavaScript实现的贷款计算器

    基于JavaScript实现的贷款计算器: <!DOCTYPE html> <html> <head> <title>JavaScript Loan C ...

  5. 理财小工具（二）贷款计算器

    最近有个需求,需要制作一个web端的小工具-----贷款计算器 先说下我的环境: Hbuilder 简直是神器,非常好用 mui Hbuilder自带,同为Dcloud公司产品 搭页面: <!d ...

  6. 【AJAX】JavaScript的面向对象

    Ajax中后端数据返回后需要前端通过JavaScript来实现动态数据更新的问题.所以,在Ajax中加深了一遍JavaScript面向对象的印象. 基础部分: JavaScript中创建对象并简单对象 ...

  7. 【JavaScript总结】JavaScript语法基础：JS高级语法

    作用域链: 1.JS中只有函数能够限定作用域的范围: 2.变量处理在制定的函数范围内,还有一个特殊的作用域,就是没有用var 声明的全局作用域 3.js中的作用域链是为了清晰的表示出所有变量的作用范围 ...

  8. 【JavaScript总结】JavaScript语法基础：DOM

    ->DOM的理解:文档对应dom树 ->有了DOM能做什么:DOM的操作 html文档做为DOM树模型,DOM树的节点就是对象.对象会触发事件来执行一些事件代码. C#中的事件是一个委托变 ...

  9. 【JavaScript总结】JavaScript语法基础：JS编码

    运算符 数学:+. -. *. / 逻辑:>. < .>= .<=. == . !=.&&.|| . === .!==(完全等于) 对象相关 new delet ...

最新文章

  1. SpringCache与redis集成，优雅的缓存解决方案
  2. 快乐数(最终要变成1)
  3. DDBuildToolsRelease1.0
  4. nginx_upsteam
  5. 最新进展概述：澄清式提问辅助理解信息检索中的用户意图
  6. 回溯法（其实是递归）
  7. linux pandas教程_竞赛中的Docker使用教程
  8. mac基本操作技巧_6个基本设计技巧
  9. ArrayList用法说明
  10. 使用阿里巴巴json映射_使用JSON模式验证来映射稀疏JSON
  11. pythone函数基础（11）读，写，修改EXCEL
  12. FZU - 2037 -Maximum Value Problem(规律题)
  13. java-web的mybatis的学习
  14. spyder 怎么看函数定义_看漫画学C++035：自定义函数(1)
  15. PowerDesigner的學習
  16. win7下配置Apache本地虚拟主机
  17. 远程显示协议对比：RemoteFX vs. HDX vs. PCoIP
  18. sentinel-2数据下载 大气校正 转ENVI格式
  19. python破解zip,rar文件密码问题
  20. 谷歌地图离线发布系列之偏移处理（三）纠偏算法

热门文章

  1. 时间戳转换成字符串，返回Invalid Date（自己遇到的坑）
  2. Prism4学习笔记（七）：State-Based Navigation QuickStart
  3. 用C语言求平均数的四种方法
  4. 超实用的油猴脚本推荐（持续更新）
  5. linux下的挂载点和分区是什么关系（详解挂载点）
  6. C盘扩容 ~直接磁盘管理器不能扩展~bitlocker加密解除
  7. 2022.1.12C语言小练
  8. MySQL数据库的数据更新
  9. 关于Hanoi塔的实现
  10. linux添加删除虚拟ip,Linux增加/删除虚拟ip