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

  View Code

form.css

  View Code

house.js

  View Code

util.js

  View Code

 

演示截图：

 默认时(或者重置时)：

 数据为空时：

 数据不为空时：

 计算结果时： 

 

程序猿神奇的手，每时每刻，这双手都在改变着世界的交互方式！

本文转自当天真遇到现实博客园博客，原文链接：http://www.cnblogs.com/XYQ-208910/p/5845680.html ，如需转载请自行联系原作者