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
演⽰截图:
默认时(或者重置时):
数据为空时:
数据不为空时:
计算结果时:
程序猿神奇的⼿,每时每刻,这双⼿都在改变着世界的交互⽅式!
javascript计算器代码本⽂转⾃当天真遇到现实博客园博客,原⽂链接:wwwblogs/XYQ-208910/p/5845680.html,如需转载请⾃⾏联系原作者
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论