实战：房贷计算器
1.首先用html组织一个页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet" type="text/css">
<title>房贷计算器</title>
</head>
<body>
<form action="show.html" method="post">
<table border="1px" cellspacing="0" cellpadding="5px" width="100%">
<tr>
<td colspan="3" >
<span class="title" >房贷计算器</span>
</td>
</tr>
<tr>
<td width="15%">平米单价：</td>
<td width="45%">
<input type="text" id="unitprice" name="unitprice" class="init" >
</td>
<td width="40%">
<span id="unitpriceMsg" class="init"></span>
</td>
</tr>
<tr>
<td width="15%">租 金：</td>
<td width="45%">
<input type="text" id="rent" name="rent" class="init" >
</td>
<td width="40%">
<span id="rentMsg" class="init"></span>
</td>
</tr>
<tr>
<td width="15%">物业费：</td>
<td width="45%">
<input type="text" id="cost" name="cost" class="init">
</td>
<td width="40%">
<span id="costMsg" class="init"></span>
</td>
</tr>
<tr>
<td width="15%">面 积：</td>
<td width="45%">
<input type="text" id="area" name="area" class="init" >
</td>
<td width="40%">
<span id="areaMsg" class="init"></span>
</td>
<tr>
<td>首 付：</td>
<td><input type="text" name="first" id="first" class="init" ></td>
<td><span id="firstMsg" class="init"></span></td>
</tr>
<tr>
<td>贷款利息：</td>
<td><input type="text" name="interest" id="interest" class="init" ></td>
<td><span id="interestMsg" class="init"></span></td>
</tr>
<tr>
<td colspan="3">
<input type="submit" value="提交">
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>
<br>
<div id="result">
<table>
<tr>
<td colspan="2" ><span class="title" >计算结果</span></td>
</tr>
<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>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
2.数据的输入验证，动态验证
element.addEventListener(event, function, useCapture)
参数值
| 参数 | 描述 |
|---|---|
| event | 必须。字符串，指定事件名。 注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。 提示： 所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。 |
| function | 必须。指定要事件触发时执行的函数。 当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。 |
| useCapture |
可选。布尔值，指定事件是否在捕获或冒泡阶段执行。 可能值:
|
先写一个通用js，
function validateRegEx(eleName,reg) {
var obj=document.getElementById(eleName);
var str=document.getElementById(eleName+'Msg');
if(obj.value!="") {
if (reg.test(obj.value)) {
obj.className = "right";
if (str != null) {
str.innerHTML = "输入格式正确";
str.className = "right";
}
return true;
} else {
obj.className = "wrong";
str.innerHTML = "输入格式错误";
str.className = "wrong";
return false;
}
} else {
obj.className = "wrong";
str.innerHTML = "内容不能为空";
str.className = "wrong";
return false;
}
}
function validateEmpty(eleName) {
var obj=document.getElementById(eleName);
var str=document.getElementById(eleName+'Msg');
if(obj.value!=""){
if(str!=null){
if(obj.value!=""){
obj.className="right";
str.innerHTML="输入格式正确";
str.className="right";
return true;
}else{
obj.className="wrong";
str.innerHTML="内容不可为空！";
str.className="wrong";
return false;
}
}
}
}
然后再写一个js，动态的验证
function validate_unitprice() {
return validateRegEx("unitprice",/^\d+(\.\d{1,2})?$/);
}
function validate_rent() {
return validateRegEx("rent",/^\d+(\.\d{1,2})?$/);
}
function validate_cost() {
return validateRegEx("cost",/^\d+(\.\d{1,2})?$/);
}
function validate_area() {
return validateRegEx("area",/^\d+(\.\d{1,2})?$/);
}
function validate_interest() {
return validateRegEx("interest",/^\d+(\.\d{1,2})?$/);
}
//通过对事件的监听，动态的验证
window.onload=function () {
document.getElementById('unitprice').addEventListener("blur",validate_unitprice,false);
document.getElementById('rent').addEventListener("blur",validate_rent,false);
document.getElementById('cost').addEventListener("blur",validate_cost,false);
document.getElementById('area').addEventListener("blur",validate_area,false);
document.getElementById('interest').addEventListener("blur",validate_interest,false);
//再给添加一个鼠标滑动效果
var treles=document.getElementsByTagName("tr");
for(var i=0;i<treles.length;i++){
treles[i].onmouseover=function () {
this.bgColor="#f2f2f2";
}
treles[i].onmouseout=function () {
this.bgColor="#ffffff";
}
}
}
3.计算结果实现
做一个工具函数，实现四舍五入，保留若干位小数。在js中，字符串转化为number类型靠两个函数：parseInt()和parseFloat()
综合实战：房贷计算器
联合验证与数学计算一起进行；将采用动态的事件设置方式。
数据验证完成后，还需要计算出结果。
数据的输入验证，应对所有需要验证的部分准备出相应的工具文件 xxx.js，在js的目录下进行建立。再在这个目录下创建一个house.js文件，主要功能是负责进行验证与计算。
【要是文件变为其他的编码，而不是UTF-8，则打开WS软件的file-settings…-使用搜索：encode-点击file encodings，在右侧框内将project encoding改为UTF-8】
费用计算：牵扯至小数点，以至于四舍五入的操作。在金钱费用上都最多保留两位小数。【以下代码 函数定义至 xxx.js 文件里】
新建一个存放计算函数的js文件，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet" type="text/css">
<title>房贷计算器</title>
</head>
<body>
<form action="show.html" method="post">
<table border="1px" cellspacing="0" cellpadding="5px" width="60%">
<tr>
<td colspan="3" >
<span class="title" >房贷计算器</span>
</td>
</tr>
<tr>
<td width="15%">平米单价：</td>
<td width="45%">
<input type="text" id="unitprice" name="unitprice" class="init" >/平米
</td>
<td width="40%">
<span id="unitpriceMsg" class="init"></span>
</td>
</tr>
<tr>
<td width="15%">租 金：</td>
<td width="45%">
<input type="text" id="rent" name="rent" class="init" >/平米
</td>
<td width="40%">
<span id="rentMsg" class="init"></span>
</td>
</tr>
<tr>
<td width="15%">物业费：</td>
<td width="45%">
<input type="text" id="cost" name="cost" class="init">/平米
</td>
<td width="40%">
<span id="costMsg" class="init"></span>
</td>
</tr>
<tr>
<td width="15%">面 积：</td>
<td width="45%">
<input type="text" id="area" name="area" class="init" >平米
</td>
<td width="40%">
<span id="areaMsg" class="init"></span>
</td>
<tr>
<td>首 付：</td>
<td>
<select name="first" id="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" class="init"></span></td>
</tr>
<tr>
<td>贷款利息：</td>
<td><input type="text" name="interest" id="interest" class="init" ></td>
<td><span id="interestMsg" class="init"></span></td>
</tr>
<tr>
<td colspan="3">
<input type="button" value="计算" onclick="cal()">
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>
<br>
<div id="result">
<table>
<tr>
<td colspan="2" ><span class="title" >计算结果</span></td>
</tr>
<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>
</div>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="house.js"></script>
<script type="text/javascript" src="calculate.js"></script>
</body>
</html>
