房贷计算器是一种房贷计算的在线计算Web应用,按用户选择的贷款类型、贷款金额、期限、利率可计算得出每月月供参考、支付利息、还款总额这些信息。本文模仿新浪财经开发的房贷计算器。

作品预览

https://fangdai.gitapp.cn

源码地址

https://github.com/geeeeeeeek/fangdai

代码结构

整个项目代码分为css、js、image和index.html ,总的来说,代码结构比较简单,容易理解。主入口文件就是index.html,感兴趣的同学可以下载代码学习。

各种css和js文件通过link的方式引入,如下:

<link rel="icon" sizes="114x114" href="images/favicon.png">
<link rel="stylesheet" type="text/css" href="/css/my-common.min.css"/>
<link rel="stylesheet" type="text/css" href="/css/my-houseloan.min.css"/>
<script type="text/javascript" src="/js/zepto.min.js" async></script>
<script type="text/javascript" src="/js/houseloan_calculator.js" async></script>
<script src="/js/common_tpl.js" type="text/javascript" async></script>

首页预览

【开源分享】基于Html开发的房贷计算器,模仿新浪财经的更多相关文章

  1. 分享基于Qt5开发的一款故障波形模拟软件

    背景介绍 这是一款采用Qt5编写的用于生成故障模拟波形的软件.生成的波形数据用于下发到终端机器生成对应的故障类型,用于培训相关设备维护人员的故障排查技能.因此,在这款软件中实现了故障方案管理.故障波形 ...

  2. 基于WeChat的消息存储备份、远程控制、小功能项目开源分享计划

    WeChat+ 关于该项目 起源 该项目的起因是一个比较程(老)序(油)猿(条)的理由,有一天我发现我下班时间比较早,有点尴尬,但是又不想没事干还坐在公司,那么如何解决我的问题呢,初步想法是远程控制电 ...

  3. 基于开源 Openfire 聊天服务器 - 开发Openfire聊天记录插件[转]

    上一篇文章介绍到怎么在自己的Java环境中搭建openfire插件开发的环境,同时介绍到怎样一步步简单的开发openfire插件.一步步很详细的介绍到简单插件开发,带Servlet的插件的开发.带JS ...

  4. 基于Python使用SVM识别简单的字符验证码的完整代码开源分享

    关键字:Python,SVM,字符验证码,机器学习,验证码识别 1   概述 基于Python使用SVM识别简单的验证字符串的完整代码开源分享. 因为目前有了更厉害的新技术来解决这类问题了,但是本文作 ...

  5. openfire:基于开源 Openfire 聊天服务器 - 开发Openfire聊天记录插件

    基于开源 Openfire 聊天服务器 - 开发Openfire聊天记录插件 上一篇文章介绍到怎么在自己的Java环境中搭建openfire插件开发的环境,同时介绍到怎样一步步简单的开发openfir ...

  6. 基于开源 Openfire 聊天服务器 - 开发Openfire聊天记录插件

    原文:http://www.cnblogs.com/hoojo/archive/2013/03/29/openfire_plugin_chatlogs_plugin_.html 随笔-150  评论- ...

  7. 基于 Arduino 开发板,这款插座是可编程且开源的

    基于 Arduino 开发板,这款插座是可编程且开源的 https://www.oschina.net/news/74861/open-source-socket https://github.com ...

  8. TriAquae 是一款由国产的基于Python开发的开源批量部署管理工具

    怀着鸡动的心情跟大家介绍一款国产开源运维软件TriAquae,轻松帮你搞定大部分运维工作!TriAquae 是一款由国产的基于Python开发的开源批量部署管理工具,可以允许用户通过一台控制端管理上千 ...

  9. [PHP] 一个免费、开源的基于tp5+layui2.1.5开发的快速开发框架

    推荐 一个免费.开源的基于tp5+layui2.1.5开发的快速开发框架,既可以用来学习,也可以用来实际项目的快速开发: 码云下载:https://gitee.com/eduaskcms/eduask ...

  10. 微信小程序--简约风博客小程序(基于云开发 - 全开源)

    微信小程序--简约风博客小程序(基于云开发 - 全开源) 项目启动纯属突发奇想,想看看博客小程序,例如wehalo博客小程序,但是感觉自建平台还要浪费自己的服务器算力,还没有访问量,省省吧. 本着白嫖 ...

随机推荐

  1. 探秘扫雷游戏的C语言实现

    1 引言 1.1 为什么写这篇文章? 项目仓库地址:基于 C 语言实现的扫雷游戏 我决定写这篇文章的初衷是想分享我在使用C语言开发扫雷游戏的经验和心得.通过这篇文章,我希望能够向读者展示我是如何利用C ...

  2. ElasticSearch之cat indices API

    命令样例如下: curl -X GET "https://localhost:9200/_cat/indices?v=true&pretty" --cacert $ES_H ...

  3. 当创建pvc后,kubernetes组件如何协作

    本文分享自华为云社区<当创建一个pvc后,kubernetes会发生什么?>,作者:可以交个朋友. 一.背景 外部存储接入 Kubernetes 的方式主要有两种:In-Tree 和 Ou ...

  4. Java并发(二十二)----wait notify的正确姿势

    开始之前先看看,sleep(long n) 和 wait(long n) 的区别: 1) sleep 是 Thread 的静态方法,而 wait 是 Object 的方法 2) sleep 不需要强制 ...

  5. 19、Flutter StatelessWidget 、 StatefulWidget

    在Flutter中自定义组件其实就是一个类,这个类需要继承StatelessWidget  /  StatefulWidget. StatelessWidget是无状态组件,状态不可变的widget ...

  6. 获取yml自定义内容的方式

    yml内容 yml: login: name: zhangsan age: 18 pass: 123456 方式一: 创建实体类 @Configuration @ConfigurationProper ...

  7. Spark Core快速入门

    Spark-core快速入门 一.简介 Apache spark是专门为大规模数据处理而设计的快速通用的计算模型,是一种类似于Mapreduce通用并行计算框架,与mapreduce不同的是,spar ...

  8. java进行数据库操作的并发控制的2种方法

    本文分享自华为云社区<java进行数据库操作的并发控制>,作者:张俭. 在现代应用编码中,从数据库里面find出来,进行一些业务逻辑操作,最后再save回去.即: Person perso ...

  9. LiteOS:剖析时间管理模块源代码

    摘要:Huawei LiteOS的时间管理模块以系统时钟为基础,分为2部分,一部分是SysTick中断,为任务调度提供必要的时钟节拍:另外一部分是,给应用程序提供所有和时间有关的服务,如时间转换.统计 ...

  10. 华为云UGO:醒醒!你的异构数据库迁移难题有救了

    摘要:华为云推出的数据库和应用迁移 UGO,正是一款专注于异构数据库结构迁移和应用SQL转换的专业云服务. 数字化时代下,上云已成为企业管理者的基本共识,随着技术日新月异,上云也变得轻松简单起来,但异 ...