JavaScript：综合案例---房贷计算器的实现
房贷计算器的实现
（可以使用的编辑器：webStrom、subLime、notePad++、editPlus）
输入数据：
平方单价 70,000.00 元/平方 B1
租金 382.50 元/平方 B2
物业费 50.50 元/平方 B3
面积 200 平方 B4
首付比例 40% 成 B5
贷款利息 4% B6
输出数据（计算过程）:
首付金额 5,600,000.00 元 B8 公式：B1 x B4 x B5
贷款总额 8,400,000.00 元 B9 公式：B1 x B4 x (100% -B5)
每月支付利息 28,000.00 元/月 B10 公式：B9 x B6/12
每月租金 76,500.00 元/月 B11 公式：B2 x B4
每月物业费 10,100.00 元/月 B12 公式：B4 x B3
实现表单界面：
第一层(inputDiv)：作为输入数据使用
第二层(butDiv)：控制器按钮
第三层(calDiv): 显示所有的计算结果
1、建立css文件夹，将from.css文件拷贝到此文件夹当中
2、建立一个页面：house.html
3、在代码之中进行表单控件的填充操作
事件验证要使用动态的事件绑定：
1、在js目录中建立：house.js文件；
2、考虑到代码常用性问题，建立一个util.js文件，作为公共操作文件；
3、在house.html页面之中导入这两个js文件；
4、首先在util.js进行公共的验证操作;
5、需要为每一个具体的输入设置验证函数，实在house.js文件中完成的;
数据的计算操作
1、对于计算按钮绑定事件处理，并计算输出数据，需要使用parseFloat()将字符串数据转换一下才可以计算。
2、设置重置按钮事件，对输入数据进行清空 。
具体代码如下：
house.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>房贷计算器</title>
<link rel="stylesheet" type="text/css" href="css/form.css">
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript" src="js/house.js"></script> </head>
<body>
<div id="inputDiv">
<form action="">
<table border="1" width="100%">
<tr>
<td colspan="3">房贷计算器</td>
</tr>
<tr>
<td width = "20%">出售单价(¥/m<sup>2</sup>)：</td>
<td width = "50%"><input type="text" name="unitPrice" id="unitPrice" class="init"></td>
<td width = "30%"><span id="unitPriceSpan">请输入房屋出售单价/平米</span></td>
</tr>
<tr>
<td>出租单价(¥/m<sup>2</sup>):</td>
<td><input type="text" name="rentPrice" id="rentPrice" class="init"></td>
<td><span id="rentPriceSpan">请输入房屋出租单价/平米</span></td>
</tr>
<tr>
<td>物业费(¥/m<sup>2</sup>):</td>
<td><input type="text" name="proPrice" id="proPrice" class="init"></td>
<td><span id="proPriceSpan">请输入物业费用/平米</span></td>
</tr>
<tr>
<td>房屋面积(m<sup>2</sup>):</td>
<td><input type="text" name="area" id="area" class="init"></td>
<td><span id="areaSpan">请输入房屋面积</span></td>
</tr>
<tr>
<td>首付比例:</td>
<td>
<select id="pay" name="pay">
<option value="10">10%</option>
<option value="20">20%</option>
<option value="30">30%</option>
<option value="40" selected="true">40%</option>
<option value="50">50%</option>
</select>
</td>
<td><span id="paySpan">请选择首付的比例</span></td>
</tr>
<tr>
<td>贷款利息:</td>
<td><input type="text" name="cost" id="cost" class="init"></td>
<td><span id="costSpan">请输入贷款的利率(%)</span></td>
</tr>
</table>
</form>
</div>
<div id="butDiv">
<input type="button" value="计算" id="calBut">
<input type="button" value="重置" id="restBut">
</div>
<div id="calDiv">
<div>首付金额：<span id="firstResult"></span></div>
<div>贷款金额：<span id="allResult"></span></div>
<div>每月支付利息：<span id="costResult"></span></div>
<div>每月支付租金：<span id="rentResult"></span></div>
<div>每月物业费：<span id="proResult"></span></div>
</div>
</body>
</html>
form.css
/*成功*/
.success{
background:#f5f5f5;
font-weight:bold;
color:#000000;
border:solid 1px #009900; /*边框为绿色*/
} /*失败*/
.failure{
background:#f5f5f5;
font-weight:bold;
color:#000000;
border:solid 1px #990000; /*边框为红色*/
} /*初始化*/
.init{
background:#f5f5f5;
font-weight:bold;
color:#000000;
}
house.js
//为页面动态绑定事件
window.onload = function(){ bindEvent(ele("unitPrice"),"blur",function(){
validateUnitPrice();
}); bindEvent(ele("rentPrice"),"blur",function(){
validateRentPrice();
}); bindEvent(ele("proPrice"),"blur",function(){
validateProPrice();
}); bindEvent(ele("area"),"blur",function(){
validateArea();
}); bindEvent(ele("cost"),"blur",function(){
validateCost();
}); bindEvent(ele("calBut"),"click",function(){
if (validateForm()) { //表单通过验证之后可以进行具体的计算操作
calDiv_SpanInnerHTML();
};
}); bindEvent(ele("restBut"),"click",function(){
resetForm();
});
} //验证出售单价
function validateUnitPrice() {
return validateNumber("unitPrice");
} //验证出租单价
function validateRentPrice() {
return validateNumber("rentPrice");
} //验证物业费用
function validateProPrice() {
return validateNumber("proPrice");
} //验证住房面积
function validateArea() {
return validateNumber("area");
} //验证贷款利息
function validateCost() {
return validateNumber("cost");
} //提交验证表单
function validateForm () {
return validateUnitPrice() && validateRentPrice() && validateProPrice() && validateArea() && validateCost();
} //重置表单
function resetForm () { //输入的数据置空
ele("unitPrice").value = "";
ele("rentPrice").value = "";
ele("proPrice").value = "";
ele("area").value = "";
ele("cost").value = ""; //设置input样式为初始化
ele("unitPrice").className = "init";
ele("rentPrice").className = "init";
ele("proPrice").className = "init";
ele("area").className = "init";
ele("cost").className = "init"; //重新设置提示信息
ele("unitPriceSpan").innerHTML = "请输入房屋出售单价/平米";
ele("rentPriceSpan").innerHTML = "请输入房屋出租单价/平米";
ele("proPriceSpan").innerHTML = "请输入物业费用/平米";
ele("areaSpan").innerHTML = "请输入房屋面积";
ele("costSpan").innerHTML = "请输入贷款的利率(%)";
} //计算输出数据
function calDiv_SpanInnerHTML () { //取出数据
var unitPrice = parseFloat(ele("unitPrice").value);
var rentPrice = parseFloat(ele("rentPrice").value);
var proPrice = parseFloat(ele("proPrice").value);
var area = parseFloat(ele("area").value);
var pay = parseFloat(ele("pay").value);
var cost = parseFloat(ele("cost").value); //计算数据并输出(方式一：保留两位小数)
// ele("firstResult").innerHTML = (unitPrice * area * pay).toFixed(2);
// ele("allResult").innerHTML = (unitPrice * area * (1-pay/100)).toFixed(2);
// ele("costResult").innerHTML = (unitPrice * area * (1-pay/100) * cost/12).toFixed(2);
// ele("rentResult").innerHTML = (rentPrice * area).toFixed(2);
// ele("proResult").innerHTML = (area * proPrice).toFixed(2); //计算数据并输出(方式二：保留两位小数)
ele("firstResult").innerHTML = fomatFloat (unitPrice * area * pay , 2);
ele("allResult").innerHTML = fomatFloat (unitPrice * area * (1-pay/100) , 2);
ele("costResult").innerHTML = fomatFloat (unitPrice * area * (1-pay/100) * cost/12 , 2);
ele("rentResult").innerHTML = fomatFloat (rentPrice * area , 2);
ele("proResult").innerHTML = fomatFloat (area * proPrice , 2);
} /**
* 保留两位小数
* @pragm src 要计算的数据
* @pragm pos 保留位数
*/
function fomatFloat(src,pos){
return Math.round(src*Math.pow(10, pos))/Math.pow(10, pos);
}
util.js
/**
* 表示进行数据是否为空的验证操作
* @param eleId 表示要操作的组件ID名称
*/
function validateEmpty(eleId) {
var obj = ele(eleId); //取得指定的对象
if (obj != null) { //现在对象已经取得
if (obj.value == "") {
setFailure(obj);
return false;
}else{
setSuccess(obj);
return true;
}
}
return false;
} /**
* 使用正则进行数据的验证
* @param eleId 组件的元素id
* @param regex 正则验证规则
*/
function validateRegex(eleId,regex) {
var obj = ele(eleId);//取得指定的对象
if (validateEmpty(eleId)) { //有数据
if (!regex.test(obj.value)) {
setFailure(obj);
return false;
}else{
setSuccess(obj);
return true;
}
}
return false;
} /**
* 验证输入的内容是否是数字，包含小数
* @param eleId 组件的元素的id
*/
function validateNumber(eleId) { return validateRegex(eleId,/^\d+(\.\d+)?$/);
} /**
* 根据id取得一个具体的对象，是简化调用的难度
* @param eleId 表示要操作的组件ID名称
*/
function ele(eleId) {
return document.getElementById(eleId);
} /**
* 根据id取得一个具体的对象集合，是简化调用的难度
* @param eleId 表示要操作的组件ID名称
*/
function allEle(eleId) {
return document.all(eleId);
} /**
* 设置信息正确和错误时样式
* @param obj 要进行样式信息设置的元素
* @param className 样式名称
* @param text 显示的文本信息
*/
function setValidateStyle(obj,className,text) {
var spanObj = ele(obj.id+"Span"); //根据对象的id属性找到Span
obj.className = className;
if (spanObj != null) {
spanObj.innerHTML = text;
}
}
function setSuccess(obj) {
setValidateStyle(obj,"success","<font color='green'>√</font>");
}
function setFailure(obj) {
setValidateStyle(obj,"failure","<font color='red'>×</font>");
} /**
* 动态绑定事件
* @param eventType 事件类型
* @param obj 事件执行对象
* @param fun 事件操作函数
*/
function bindEvent(obj,eventType,fun) { obj.addEventListener(eventType,fun,false);
}
演示截图：
默认时(或者重置时)：
数据为空时：
数据不为空时：
计算结果时：
JavaScript：综合案例---房贷计算器的实现的更多相关文章
- html笔记05：html、css、javascript综合案例
1.首先是html代码: <!-- markup time --> <div class="wrapper wb"> <div class=" ...
- JavaScript：综合案例-表单验证
综合案例:表单验证 开发要求: 要求定义一个雇员信息的增加页面,例如页面名称为"emp_add.htmnl",而后在此页面中要提供有输入表单,此表单定义要求如下: .雇员编号:必须 ...
- jquery-easyUI第二篇【综合案例】
基于easyUI开发的一个综合案例模版 <%@ page language="java" pageEncoding="UTF-8"%> <!D ...
- CSS3_综合案例
综合案例 设置元素的 width,还可以利用 left 和 right 为了防止图片太小,background-size: 100% 100%; <!DOCTYPE html> <h ...
- Ext.js入门：常用组件与综合案例（七）
一:datefield简单示例 二:timefield简单示例 三:numberfield简单示例 四:FormPanel提交 datefield简单示例: <html xmlns=&quo ...
- 纯js房贷计算器开源
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- swiper快速切换插件（两个综合案例源码）
swiper快速切换插件 swiper.js自己去官网下载哈.先来一个tab切换案例: demo.html <!doctype html> <html> <head> ...
- JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片
知识点梳理 课堂讲义 1.JQuery快速入门 1.1.JQuery介绍 jQuery 是一个 JavaScript 库. 框架:Mybatis (jar包) 大工具 插件:PageHelper (j ...
- DOM综合案例、SAX解析、StAX解析、DOM4J解析
今日大纲 1.DOM技术对xml的增删操作 2.使用DOM技术完成联系人管理 3.SAX和StAX解析 4.DOM4J解析 5.XPATH介绍 1.DOM的增删操作 1.1.DOM的增加操作 /* * ...
随机推荐
- 1. while循环（当循环） 2. do{}while（）循环 3. switch cose（多选一） 例子：当选循环下求百鸡百钱 用 switch cose人机剪刀石头布
1. while循环: 当选循环下求百鸡百钱:如下: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...
- 利用Python的三元表达式解决Odoo中工资条中城镇、农村保险的问题
Python中没有像C#中有三元表达式 A?B:C 但在python中可以通过 A if condition else B 的方式来达到同样的效果. 例如 : 1 if True else 0 输出 ...
- 简单Qt网络通信
最近要用到Qt的Socket部分,网上关于这部分的资料都比较复杂,我在这总结一下,把Socket的主要部分提取出来,实现TCP和UDP的简单通信. 1.UDP通信 UDP没有特定的server端和cl ...
- [转]asp.net mvc 从数据库中读取图片
本文转自:http://www.cnblogs.com/mayt/archive/2010/05/20/1740358.html 首先是创建一个类,继承于ActionResult,记住要引用Syste ...
- TCP和UDP的135、137、138、139、445端口的作用
如果全是2000以上的系统,可以关闭137.138.139,只保留445 如果有xp系统,可能以上四个端口全部要打开 无论你的服务器中安装的是Windows 2000 Server,还是Windows ...
- PowerCmd-cmd命令行管理工具
缘由 看了大漠在慕课网关于angular的讲解,用到了PowerCmd.就百度一下准备下载,很小很实用的工具,发现有人总结了.备忘 http://www.cnblogs.com/xing901022/ ...
- var object dynamic的区别
一.var var本身不是一种类型,只是一种语法糖:var声明的变量在赋值的时候即已决定其变量类型,编译时会进行校验. 二.object object是所以类型的基类,故可以赋任何类型的值. 三.dy ...
- 《你不知道的JavaScript》读书笔记（二）词法作用域
JavaScript 采用的是 词法作用域 的工作模型. 定义 词法化:大部分标准语言编译器的第一个工作阶段叫词法化(单词化),这个过程会对源代码中的字符进行检查,如果是有状态的解析过程,还会赋予单词 ...
- PHP 设计模式 笔记与总结（1）命名空间 与 类的自动载入
① PHP 面向对象高级特性 ② 11 种 PHP 设计模式 ③ PSR-0,Composer,Phar 等最流行的技术 目标是掌握 PHP 各类设计模式,以及具备设计纯面向对象框架和系统的能力 [命 ...
- Ubuntu 卸载 VMware
sudo vmware-installer --uninstall-product vmware-workstationsudo vmware-installer --uninstall-produc ...