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 ,如需转载请自行联系原作者
相关文章
|
15天前
|
JavaScript 前端开发
js变量的作用域、作用域链、数据类型和转换应用案例
【4月更文挑战第27天】JavaScript 中变量有全局和局部作用域,全局变量在所有地方可访问,局部变量只限其定义的代码块。作用域链允许变量在当前块未定义时向上搜索父级作用域。语言支持多种数据类型,如字符串、数字、布尔值,可通过 `typeof` 检查类型。转换数据类型用 `parseInt` 或 `parseFloat`,将字符串转为数值。
18 1
|
2月前
|
JavaScript 计算机视觉
纯js实现人脸识别眨眨眼张张嘴案例——ccv.js
纯js实现人脸识别眨眨眼张张嘴案例——ccv.js
54 0
|
2月前
|
JavaScript 前端开发 Java
纯前端JS实现人脸识别眨眨眼张张嘴案例
纯前端JS实现人脸识别眨眨眼张张嘴案例
63 0
|
2月前
|
JavaScript 计算机视觉
纯js实现人脸识别眨眨眼张张嘴案例——alive_face.js
纯js实现人脸识别眨眨眼张张嘴案例——alive_face.js
23 0
|
15天前
|
JavaScript 前端开发
js的let、const、var的区别以及应用案例
【4月更文挑战第27天】ES6 中,`let` 和 `const` 是新增的变量声明关键字,与 `var` 存在显著差异。`let` 允许重新赋值,而 `const` 不可,且两者都具有块级作用域。`var` 拥有函数级作用域,并可在函数内任意位置访问。`let` 和 `const` 声明时必须初始化,而 `var` 不需。根据需求选择使用:局部作用域用 `let`/`const`,全局或函数范围用 `var`,不可变值用 `const`。
23 2
|
17天前
android-agent-web中js-bridge案例
android-agent-web中js-bridge案例
20 2
|
26天前
|
开发框架 前端开发 JavaScript
采用C#.Net +JavaScript 开发的云LIS系统源码 二级医院应用案例有演示
技术架构:Asp.NET CORE 3.1 MVC + SQLserver + Redis等 开发语言:C# 6.0、JavaScript 前端框架:JQuery、EasyUI、Bootstrap 后端框架:MVC、SQLSugar等 数 据 库:SQLserver 2012
22 0
|
2月前
|
JavaScript
jQuery选择器案例之——index.js
jQuery选择器案例之——index.js
8 0
|
2月前
|
JavaScript 前端开发
JavaScript操作BOM简单案例
JavaScript操作BOM简单案例
9 1
|
2月前
|
JavaScript 计算机视觉
纯js实现人脸识别眨眨眼张张嘴案例——index.html
纯js实现人脸识别眨眨眼张张嘴案例——index.html
28 0