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小时内删除。