当前位置: 首页 > news >正文

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 ,如需转载请自行联系原作者

相关文章:

  • Kubernetes的ConfigMap说明
  • 显示高德地图及蓝点
  • Android短轮询解决方案——CountDownTimer+Handler
  • ORACLE 11G 搭建dataguard详细步骤(所有操作总结)
  • 最新微信支付配置流程说明
  • offsetHeight,clientHeight,scrollHeight,offsetY等属性的理解
  • 测试等级划分
  • 对自组织的实验
  • Oracle ORA-01940: 无法删除当前连接的用户
  • XlsToOra
  • CTF---密码学入门第一题 这里没有key
  • mysql sql语句大全(MySQL语句 整理一)
  • 一张大图看懂Mvc启动过程
  • 路由声明式传参
  • 设计一个你自己不会去用的产品
  • ----------
  • 分享一款快速APP功能测试工具
  • 收藏网友的 源程序下载网
  • JavaScript的使用你知道几种?(上)
  • JavaScript服务器推送技术之 WebSocket
  • python_bomb----数据类型总结
  • Python中eval与exec的使用及区别
  • TiDB 源码阅读系列文章(十)Chunk 和执行框架简介
  • XForms - 更强大的Form
  • 动手做个聊天室,前端工程师百无聊赖的人生
  • 复习Javascript专题(四):js中的深浅拷贝
  • 高程读书笔记 第六章 面向对象程序设计
  • 关于 Linux 进程的 UID、EUID、GID 和 EGID
  • 记一次用 NodeJs 实现模拟登录的思路
  • 设计模式(12)迭代器模式(讲解+应用)
  • 使用 QuickBI 搭建酷炫可视化分析
  • 我建了一个叫Hello World的项目
  • 新版博客前端前瞻
  • 一加3T解锁OEM、刷入TWRP、第三方ROM以及ROOT
  • 06-01 点餐小程序前台界面搭建
  • ​MPV,汽车产品里一个特殊品类的进化过程
  • ​力扣解法汇总946-验证栈序列
  • ###STL(标准模板库)
  • (¥1011)-(一千零一拾一元整)输出
  • (13)[Xamarin.Android] 不同分辨率下的图片使用概论
  • (3)选择元素——(14)接触DOM元素(Accessing DOM elements)
  • (Java岗)秋招打卡!一本学历拿下美团、阿里、快手、米哈游offer
  • (独孤九剑)--文件系统
  • (附源码)ssm基于web技术的医务志愿者管理系统 毕业设计 100910
  • (附源码)ssm考生评分系统 毕业设计 071114
  • (简单) HDU 2612 Find a way,BFS。
  • (四) Graphivz 颜色选择
  • (四)Tiki-taka算法(TTA)求解无人机三维路径规划研究(MATLAB)
  • (学习日记)2024.03.12:UCOSIII第十四节:时基列表
  • (循环依赖问题)学习spring的第九天
  • (转载)利用webkit抓取动态网页和链接
  • * 论文笔记 【Wide Deep Learning for Recommender Systems】
  • .NET CF命令行调试器MDbg入门(二) 设备模拟器
  • .NET MVC 验证码
  • .NET/C# 推荐一个我设计的缓存类型(适合缓存反射等耗性能的操作,附用法)