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

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⽂件夹，将⽂件拷贝到此⽂件夹当中

2、建⽴⼀个页⾯：

3、在代码之中进⾏表单控件的填充操作

事件验证要使⽤动态的事件绑定：

1、在js⽬录中建⽴：⽂件；

2、考虑到代码常⽤性问题，建⽴⼀个⽂件，作为公共操作⽂件；

3、在页⾯之中导⼊这两个js⽂件；

4、⾸先在进⾏公共的验证操作;

5、需要为每⼀个具体的输⼊设置验证函数，实在⽂件中完成的;

数据的计算操作

1、对于计算按钮绑定事件处理，并计算输出数据，需要使⽤parseFloat()将字符串数据转换⼀下才可以计算。

2、设置重置按钮事件，对输⼊数据进⾏清空 。

具体代码如下：

View Code

View Code

View Code

View Code

演⽰截图：

默认时(或者重置时)：

数据为空时：

数据不为空时：

计算结果时：

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

本⽂转⾃当天真遇到现实博客园博客，原⽂链接：/XYQ-208910/p/，如需转载请⾃⾏联系原作者