JavaScript贷款计算器
今天花了两个小时模仿书上代码用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.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;
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>
效果图：
JavaScript贷款计算器的更多相关文章
- JavaScript权威指南----一个JavaScript贷款计算器
废话不多说上例子代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- 一个JavaScript贷款计算器
通过本案例,将会学到: . 如何在文档中查找元素 . 如何通过表单input元素来获取用户的输入数据 . 如何通过文档元素来设置HTML内容 . 如何将数据存储在浏览器中 . 如何使用脚本发起HTTP ...
- Javascript权威指南——第一章Javascript概述
示例:javascript贷款计算器 相关技术: 1.如何在文档中查找元素: 2.如何通过表单input元素来获取用户的输入数据: 3.如何通过文档元素来设置HTML内容: 4.如何将数据存储在浏览器 ...
- Note | Javascript权威指南[第六版] 第1章：Javascript概述
JavaScript是一门高端的.动态的.弱类型的编程语言,非常适合面向对象和函数式的编程风格.JavaScript的语法源自Java,它的一等函数(first-class function)来 ...
- javascript权威指南学习笔记1
打开这本书,进入到javascript的世界.以前都是看各种视频,感觉什么收获也没有,反而弄得脑袋混乱,希望能够按照这本书的节奏掌握javascript这门语言,为我的前端学习打下基础. 学习前准备: ...
- JavaScript之父Brendan Eich，Clojure 创建者Rich Hickey，Python创建者Van Rossum等编程大牛对程序员的职业建议
软件开发是现时很火的职业.据美国劳动局发布的一项统计数据显示,从2014年至2024年,美国就业市场对开发人员的需求量将增长17%,而这个增长率比起所有职业的平均需求量高出了7%.很多人年轻人会选择编 ...
- javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈
Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...
- Javascript 的执行环境(execution context)和作用域(scope)及垃圾回收
执行环境有全局执行环境和函数执行环境之分,每次进入一个新执行环境,都会创建一个搜索变量和函数的作用域链.函数的局部环境不仅有权访问函数作用于中的变量,而且可以访问其外部环境,直到全局环境.全局执行环境 ...
- 探究javascript对象和数组的异同，及函数变量缓存技巧
javascript中最经典也最受非议的一句话就是:javascript中一切皆是对象.这篇重点要提到的,就是任何jser都不陌生的Object和Array. 有段时间曾经很诧异,到底两种数据类型用来 ...
随机推荐
- CSS 文字两端对齐
<!DOCTYPE HTML> <html> <head> <title></title> <meta http-equiv=&quo ...
- HashMap对象的深层克隆
1.java.util.HashMap 的 clone 方法是浅层copy,clone出来的对象,仅仅是原来对象的一个引用,并且对克隆出来的对象进行操作是无效的. 下面是个例子: import jav ...
- (十八)WireShark 过滤语法
1.过滤IP,如来源IP或者目标IP等于某个IP例子:ip.src eq 192.168.1.107 or ip.dst eq 192.168.1.107或者ip.addr eq 192.168.1. ...
- Android自定义View的三种实现方式
在毕设项目中多处用到自定义控件,一直打算总结一下自定义控件的实现方式,今天就来总结一下吧.在此之前学习了郭霖大神博客上面关于自定义View的几篇博文,感觉受益良多,本文中就参考了其中的一些内容. 总结 ...
- 虚拟机EAL: Error reading from file descriptor
这个是虚拟机安装固有的BUG,代码差异如下: diff --git a/lib/librte_eal/linuxapp/igb_uio/igb_uio.c b/lib/librte_eal/linux ...
- AxureRP8实战手册（基础21-30）
AxureRP8实战手册(基础21-30) 本文目录 基础21. 设置元件默认选中/禁用 基础22. 设置单选按钮唯一选中 基础23. 设置元件不同状态时的样式 基础24. ...
- [C语言入门笔记]循环与运算符
循环与运算符 什么是循环? 循环就是一个不停工作的东西,可以反复的实现一个功能,这个才是计算机的重点.计算机可以重复的做一件事情,这样子可以省很多事情 循环的种类有哪些? While Do while ...
- FileFilter 遍历某个目录下文件名含有某个字符的文件
由于IIS版本的升级,造成了文件名中含有“+”的特殊字符的文件(多数是图片)在网页中不能被访问,于是必须查找当前目录下含有多少这样的文件,从而制定最佳的解决方案. 废话少说,直接上核心代码: publ ...
- 20169212《Linux内核原理与分析》第七周作业
实验 给MenuOS增加time和time-asm命令的方法: 更新menu代码到最新版 再main()函数中增加MenuConfig 增加对应的Time函数和TimeAsm函数(这里的函数要换成我们 ...
- Socket通讯
复习贴,资料大多来自百科.看了一遍理解了一遍,把绕口的话按语义给改了`_>` 对于一个网络连接来说,套接字是平等的,并没有差别,不因为在服务器端或在客户端而产生不同级别.不管是Socket还是S ...