JavaScript 案例：房贷计算器

数据表

A                                    B                    C
平米单价               70000.00                元/平米
租金                      382.50                    元/平米/月
物业费                   50.50                      元/平米/月
面积                       200                         平米
曾付比例                 40%                         成 （请设定三成半或以上）
货代利息                 4%首付金额                5600000.00               元                 公式：B1*B4*B5
贷款总额                8400000.00               元                  公式：B1*B4*(100%-B5)
每月支付利息           28000.00                  元/月             公式：B9*B6/12
每月租金                 76500.00                   元/月             公式：B2*B4
每月业务费              10100.00                   元/月             公式：B4*B3

<!DOCTYPE html>
<html>
<head><title>房贷计算器</title><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="css/房贷计算器.css"><script src="js/test.js">
//联合验证与数学计算一起进行
//将采用动态的事件设置方式
//步骤：1.界面布局
//2.数据的输入验证   test.js  house.js(负责进行验证计算)
//3.数据计算
//费用计算</script><script src="js/house.js"></script>
</head>
<body>
<form><table border="1" cellpadding="5"  cellspacing="0" width="100%" bgcolor="#F2F2F2"><tr id="tabRow"><td colspan="3"><span class="title">房贷计算器</span></td></tr><tr id="tabRow"><td width="15%"><strong>平米单价：</strong></td><td width="45%"><input type="text" name="unitprice" id="unitprice" class="init">元/平米</td><td width="40%"><span id="unitpriceMsg"></span></td></tr><tr id="tabRow"><td><strong>租&nbsp;&nbsp;&nbsp;&nbsp;金：</strong></td><td><input type="text" name="rent" id="rent" class="init">元/平米</td><td><span id="rentMsg"></span></td></tr><tr id="tabRow"><td><strong>物&nbsp;业&nbsp;费：</strong></td><td><input type="text" name="cost" id="cost" class="init">元/平米</td><td><span id="costMsg"></span></td></tr><tr id="tabRow"><td><strong>面&nbsp;&nbsp;&nbsp;&nbsp;积：</strong></td><td><input type="text" name="area" id="area" class="init">元/平米</td><td><span id="areaMsg"></span></td></tr><tr id="tabRow"><td><strong>首&nbsp;&nbsp;&nbsp;&nbsp;付：</strong></td><td><select id="first" name="first" class="init">元/平米<option value="2">2成</option><option value="3">3成</option><option value="4" selected>4成</option><option value="5">5成</option><option value="6">6成</option><option value="7">7成</option><option value="8">8成</option><option value="9">9成</option></select></td><td><span id="firstMsg"></span></td></tr><tr id="tabRow"><td><strong>贷款利息：</strong></td><td><input type="text" name="interest" id="interest" class="init">%</td><td><span id="interestMsg"></span></td></tr><tr id="tabRow"><td colspan="3"><input type="button" value="计算" id="calBut" ><input type="reset"  value="重置"></td></tr></table>
</form>
<div style="height: 20px; clear: both;"></div>
<div id="resultDiv"><table><tr><td>首付金额：</td><td><span id="firstResult"></span></td></tr><tr><td>贷款总额：</td><td><span id="totalResult"></span></td></tr><tr><td>每月支付利息：</td><td><span id="monthResult"></span></td></tr><tr><td>首付金额：</td><td><span id="rentResult"></span></td></tr><tr><td>每月租金：</td><td><span id="costResult"></span></td></tr></table>
</body>
</html>

.init{background: #F5F5F5;font-weight: bold;color: #000000;
}
.wrong{background: #F5F5F5;font-weight: bold;border:1px #FF0000 solid;color: #000000;
}
.right{background: #F5F5F5;font-weight: bold;border:1px #00FF00 solid;color: #000000;
}
.title{font-weight: bold;font-size: 26px;
}

window.onload=function(){document.getElementById("unitprice").addEventListener("blur",validateUnitprice,false);document.getElementById("rent").addEventListener("blur",validateRent,false);document.getElementById("cost").addEventListener("blur",validateCost,false);document.getElementById("area").addEventListener("blur",validateArea,false);document.getElementById("interest").addEventListener("blur",validateInterest,false);var trElement=document.all("tabRow");for(var x=0;x<trElement.length;x++){trElement[x].addEventListener("mousemove",function(){changeColor(this,'#FFFFFF')},"false");trElement[x].addEventListener("mouseout",function(){changeColor(this,'#F2F2F2')},"false");}document.getElementById("calBut").addEventListener("click",cal,false);
}
function validateUnitprice(){return validateRegex("unitprice",/^\d+(\.\d{1,2})?$/);
}
function validateRent(){return validateRegex("rent",/^\d+(\.\d{1,2})?$/);
}
function validateCost(){return validateRegex("cost",/^\d+(\.\d{1,2})?$/);
}
function validateArea(){return validateRegex("area",/^\d+(\.\d{1,2})?$/);
}
function validateInterest(){return validateRegex("interest",/^\d+(\.\d{1,2})?$/);
}
function validate(){return validateUnitprice()&&validateRent()&&validateCost()&&validateArea()&&validateInterest();
}
function cal(){//计算函数if (validate()) {//数据验证通过var t_unitprice=parseFloat(getValue("unitprice"));//平米单价var t_rent =parseFloat(getValue("rent"));//取得租金var t_cost=parseFloat(getValue("cost"));//取得物业费var t_area=parseFloat(getValue("area"));//取得面积var t_first=parseInt(getValue("first"))/10;//首付比率var t_interest=parseFloat(getValue("interest"))/100;//取得货款利息      //计算首付金额document.getElementById("firstResult").innerHTML="￥" +round(t_unitprice*t_area*t_first,2);//贷款总额document.getElementById("totalResult").innerHTML="￥" +round(t_unitprice*t_area*(1-t_first),2);//每月支付利息document.getElementById("monthResult").innerHTML="￥" +round((t_unitprice*t_area*(1-t_first))*t_interest/12,2);//每月租金document.getElementById("rentResult").innerHTML="￥" +round(t_rent*t_area,2);//每月物业费document.getElementById("costResult").innerHTML="￥" +round(t_cost*t_area,2);}
}
//在JavaScript里面由两个转换函数
//将字符串变为整数:parseInt()
//变为小数：parseFloat()
function getValue(eleName){//专门负责取出内容if (document.getElementById(eleName)!=null) {return document.getElementById(eleName).value;}else{return "";}}

function validateEmpty(eleName){var obj =document.getElementById(eleName);var msg =document.getElementById(eleName+"Msg");if (obj.value!="") {obj.className="right";if (msg!=null) {msg.innerHTML="<font color='green'>内容输入正确！</font>";}return true;}else{obj.className="wrong";if (msg!=null) {msg.innerHTML="<font color='red'>内容不允许为空！</font>";}return false;}
}
function validateRegex(eleName,regex){var obj =document.getElementById(eleName);var msg =document.getElementById(eleName+"Msg");if (regex.test(obj.value)) {obj.className="right";if (msg!=null) {msg.innerHTML="<font color='green'>内容输入正确！</font>";}return true;}else{obj.className="wrong";if (msg!=null) {msg.innerHTML="<font color='red'>输入内容格式不正确！</font>";}return false;}
}
function changeColor(obj,color){obj.bgColor=color;
}
//四舍五入
function round(num,scale){var result=Math.round((num*Math.pow(10,scale)))/(Math.pow(10,scale));return result;
}

JavaScript 案例：房贷计算器相关推荐

JavaScript：综合案例---房贷计算器的实现
房贷计算器的实现 (可以使用的编辑器:webStrom.subLime.notePad++.editPlus) 输入数据: 平方单价 70,000.00 元/平方 B1 租金 382.50 元/平方 ...
【Android笔记65】Android小案例之简易版的房贷计算器（附源代码）
这篇文章,主要介绍如何使用Android实现一个简易版的房贷计算器小案例. 目录一.房贷计算器 1.1.运行效果演示 1.2.前提准备 (1)等额本息和等额本金
【Python】一个房贷计算器功能的小案例
题目要求: 房贷计算公式如下: 〉每月月供参考=贷款金额×[月利率×(1+月利率)^还款月数]÷{[(1+月利率)^还款月数]–1}>还款总额=每月月供参考×期限× 12 ≥支付利息=还款总额– ...
计算器html js php代码,javascript如何实现计算器功能
这次给大家带来javascript如何实现计算器功能,javascript实现计算器功能的注意事项有哪些,下面就是实战案例,一起来看一下. 这个计算机主要通过二维数组将其存在一个数组中,再通过函数控制 ...
jQueryEasyUI实现房贷计算器详细教程2--jQuery部分
1.从载入JavaScript开始 jQuery 是一个 JavaScript 库,极大地简化了 JavaScript 编程.这一部分介绍下载和载入jQuery. 源代码: <script sr ...
javascript案例_如何在JavaScript中使用增强现实-一个案例研究
javascript案例 by Apurav Chauhan 通过Apurav Chauhan 如何在JavaScript中使用增强现实-一个案例研究 (How to use Augmented Re ...
C++多态案例一计算器类
C++多态案例一计算器类多态案例一计算器类案例描述多态的优点示例多态案例一计算器类案例描述分别利用普通写法和多态技术,设计实现两个操作数进行运算的计算器类多态的优点代码组织结构清晰 ...
盘点三个JavaScript案例——实现限时秒杀、定时跳转、改变盒子大小
前言今天来给大家盘点三个JavaScript案例,分别是实现限时秒杀.定时跳转.改变盒子大小案例,一起来看看吧! 一.实现限时秒杀案例 1.在淘宝网中,商家为了促销经常搞一些活动,例如限时秒杀是常见 ...
Windows phone7 软件发布：理财计算器（包括wp7房贷计算器，wp7个税计算器，wp7存款利息计算器）...
前一段时间,需要经常用到贷款计算器的功能,这样有利于我们做出更好的决策.但是我们只能通过银行的工作人员的计算器来计算,给我带来了极大的不便和损失,由此便萌生了开发一个Windows phone7版的贷 ...

JavaScript 案例：房贷计算器

数据表

JavaScript 案例：房贷计算器相关推荐

最新文章

热门文章