正文 

当前位置： 首页 > java > java教程

javascript：综合案例---房贷计算器的实现

程序猿 程序猿     2022-08-03     634

关键词：

房贷计算器的实现
　　（可以使用的编辑器：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>
View Code

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;
}
View Code

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);   
    }
View Code

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);
}
View Code

 

演示截图：

 默认时(或者重置时)：

 数据为空时：

 数据不为空时：

 计算结果时： 

 

javascript第2天学习规划丨运算符-语句-综合案例(代码片段)

JavaScript基础-第2天理解什么是流程控制，知道条件控制的种类并掌握其对应的语法规则，具备利用循环编写简易ATM取款机程序能力运算符语句综合案例运算符算术运算符数字是用来计算的，比如：乘法*、除法/、... 查看详情

学习react-简单小案例--综合案例

<html><head><title></title><metacharset="UTF-8"/><scriptsrc="js/react.min.js"type="text/javascript"charset="utf-8"></script><scriptsrc="js/react-dom.min.js 查看详情

angularjs综合笔记案例

...达式书写的位置"输出"数据。AngularJS表达式 很像 JavaScript表 查看详情

房贷计算公式(代码片段)

房贷计算公式#include<iostream>//根据贷款额度、年利率、贷款月数获得月供floatgetMonthlyPayment(floatloan,floatyearRate,intmonths)floatmonth_rate=yearRate/12;floatup=loan*month_rate;floatcomm_base=1.0f;for(inti 查看详情

房贷计算公式(代码片段)

房贷计算公式#include<iostream>//根据贷款额度、年利率、贷款月数获得月供floatgetMonthlyPayment(floatloan,floatyearRate,intmonths)floatmonth_rate=yearRate/12;floatup=loan*month_rate;floatcomm_base=1.0f;for(inti 查看详情

023.javascript基础综合

JAVASCRIPT:-------------------------------------------------------Day01-------------------------------------------1.概念:动态网站:网站的[动态功能]的开发技术where:浏览器(客户端)how:客户端动态功能的开发(客户端的表单验证,特效,客户端的计算...)what:脚本... 查看详情

还在头疼每月房贷还款？这个房贷计算机让你一目了然(代码片段)

摘要：通过楼市小程序上贷款计算器等工具人们可以很容易的了解每期还款本金、不同还款方式的利息差异、提前还款节省利息等问题。本文分享自华为云社区《房贷计算器-从原理、计算到提前还款和可视化》，作者... 查看详情

pam常见的实操案例(代码片段)

#1.怎样才能强迫用户设置的密码不能与过去3次内的密码重复？修改/etc/pam.d/system-auth,增加pam_unix.so的参数，如下passwordsufficientpam_unix.somd5shadownulloktry_first_passuse_authtokremember=3#2.如何要求用户设置的密码必须包含5个数字&#x... 查看详情

案例11：高层综合楼防火案例分析

案例11：高层综合楼防火案例分析（一） 建筑分类和耐火等级:总平面布局  防火分区:消防水泵设置规定 锅炉房,变压器  查看详情

等保2.0.2021版综合测评得分计算实例

...模板修订总结》，这次根据一个实际案例来看看2021版综合测评得分如何计算。公式回顾在上篇的修订总结中，我把公式最终形态写出来了：M=100−(∑k 查看详情

css3_综合案例

综合案例设置元素的width，还可以利用left和right 为了防止图片太小，background-size:100%100%;                  查看详情

网络工程7实操-万达酒店综合项目

接上篇《6、防火墙介绍及配置实操》之前我们讲解了防火墙的基础知识以及相应的实操案例，本篇我们结合之前的交换机、路由器及防火墙的知识，进行一个酒店网络项目的实战。本篇主要介绍一下酒店网络项目的整体... 查看详情

acl的综合应用案例

...例说明了标准ACL、扩展ACL、命名ACL的配置案例，下面介绍综合应用ACL的案例。 ACL的原理与基本配置的链接：http://yangshufan.blog.51cto.com/13004230/1958558ACL的综合应用 公司内部网络已经建成，网络拓扑图如下所示：650)this.width=65... 查看详情

黑马前端pinkhtml综合案例：圣诞节的那些事小说排行榜案例注册页面(代码片段)

文章目录综合案例1：圣诞节的那些事目标代码综合案例2：小说排行榜案例目标代码综合案例3：注册页面目标代码综合案例1：圣诞节的那些事视频p30-31目标代码<!DOCTYPEhtml><htmllang="en"><head><... 查看详情

set集合综合案例

案例01：生成0-10之间5个不相等的数方法01：使用list集合实现importrandomlist01=[]foriinrange(100):   num01=random.randint(0,10)   ifnum01notinlist01:       list 查看详情

proteus仿真51单片机电子锁综合设计案例

【Proteus仿真】51单片机电子锁综合设计案例 查看详情

javascript——函数

一.如果形参个数和实参个数不匹配　　1.相等，正常执行；　　2.实参个数多于形参个数，多掉的实参函数舍去不用，不报错；　　3.实参个数小于形参个数，看程序是否报错（计算结果可能为NaN,undefined，任何值和undefined计算都... 查看详情

set集合综合案例

案例01：生成0-10之间5个不相等的数方法1：使用list集合实现importrandomlist01=[]foriinrange(100):   num01=random.randint(0,10)   ifnum01notinlist01:       list0 查看详情