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 ,如需转载请自行联系原作者
相关文章
|
6月前
|
JavaScript 前端开发 Java
深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解
Array.find() 是 JavaScript 数组方法中一个非常实用和强大的工具。它不仅提供了简洁的查找操作,还具有性能上的独特优势:返回的引用能够直接影响原数组的数据内容,使得数据更新更加高效。通过各种场景的展示,我们可以看到 Array.find() 在更新、条件查找和嵌套结构查找等场景中的广泛应用。 在实际开发中,掌握 Array.find() 的特性和使用技巧,可以让代码更加简洁高效,特别是在需要直接修改原数据内容的情形。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
6月前
|
监控 JavaScript 前端开发
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver:原理与实战案例
MutationObserver 是一个非常强大的 API,提供了一种高效、灵活的方式来监听和响应 DOM 变化。它解决了传统 DOM 事件监听器的诸多局限性,通过异步、批量的方式处理 DOM 变化,大大提高了性能和效率。在实际开发中,合理使用 MutationObserver 可以帮助我们更好地控制 DOM 操作,提高代码的健壮性和可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver:原理与实战案例
|
7月前
|
JavaScript 前端开发 索引
40个JS常用使用技巧案例
大家好,我是V哥。在日常开发中,JS是解决页面交互的利器。V哥总结了40个实用的JS小技巧,涵盖数组操作、对象处理、函数使用等,并附带案例代码和解释。从数组去重到异步函数,这些技巧能显著提升开发效率。先赞再看后评论,腰缠万贯财进门。关注威哥爱编程,全栈开发就你行!
199 16
|
数据采集 Web App开发 JavaScript
利用Selenium和XPath抓取JavaScript动态加载内容的实践案例
利用Selenium和XPath抓取JavaScript动态加载内容的实践案例
|
10月前
|
JavaScript
js实现简洁实用的网页计算器功能源码
这是一款使用js实现简洁实用的网页计算器功能源码。可实现比较基本的加减乘除四则运算功能,界面简洁实用,是一款比较基本的js运算功能源码。该源码可兼容目前最新的各类主流浏览器。
157 2
|
JavaScript API 图形学
一个案例带你从零入门Three.js,深度好文!
【8月更文挑战第1天】本教程无需任何Threejs知识!本教程以入门为主,带你快速了解Three.js开发
360 2
一个案例带你从零入门Three.js,深度好文!
|
JavaScript 前端开发 UED
Javaweb之javascript的小案例的详细解析
通过上述步骤,我们得到了一个动态更新的实时时钟,这个简单的JavaScript案例展示了定时器的使用方法,并讲解了如何处理日期和时间。这个案例说明了JavaScript在网页中添加动态内容与交互的能力。对于涉足JavaWeb开发的学习者来说,理解和运用这些基础知识非常重要。
94 11
|
11月前
|
前端开发 JavaScript
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
131 0
|
前端开发 JavaScript 开发者
fuse.js前端搜索简单使用的三个案例
通过这三个例子可以看出,Fuse.js 是一个功能丰富、易于实现的前端搜索库。它使开发者能够便捷地实现从基础到高级的搜索功能,无论是简单的列表搜索还是实时的搜索建议,都能够高效、精确地提供给用户所需的信息。
526 0
|
JavaScript 前端开发 开发者
Vue.js 2 项目实战(四):成绩案例
Vue.js 2 项目实战(四):成绩案例