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

2021-11-07 02:37:50

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