房贷计算器。在左侧输入数据，点击“开始计算”后，右侧右侧计算出结果后直接显示出来。

这是代码：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><script src="vue.js"></script>
<style>
#bian{width: 620px;margin: 0 auto 7px;height: 865px;background-color: rgb(179, 237, 255);
}
#top{height: 86px;width: 580px;margin: 0 auto 7px;text-align:center;
}
#zong{height: 450px;width: 580px;margin: 0 auto ;font-size: small;border-bottom:1px solid rgb(92, 173, 240);border-left:1px solid rgb(92, 173, 240);border-right:1px solid rgb(92, 173, 240);border-top:1px solid rgb(92, 173, 240);
}
#app{float: left;width: 330px;height: 100%;background-color:rgb(230, 255, 230);
}
#daikuanleibie{border-bottom:1px dotted #999;
}
#two{margin-top: 2px;border-top:1px dotted #999;border-bottom:1px dotted #999;
}
#three{margin-top: 2px;border-top:1px dotted #999;border-bottom:1px dotted #999;
}
#four{margin-top: 2px;border-top:1px dotted #999;border-bottom:1px dotted #999;
}
#five{margin-top: 2px;border-top:1px dotted #999;border-bottom:1px dotted #999;
}
#six{margin-top: 2px;border-top:1px dotted #999;
}
#you{float:left;background-color: rgb(242, 253, 242);width: 250px;   height: 100%;
}
#xia{width: 580px;margin: 0 auto ;font-size: small;border-bottom:1px solid rgb(92, 173, 240);border-left:1px solid rgb(92, 173, 240);border-right:1px solid rgb(92, 173, 240);background-color: rgb(198, 226, 250);
}
</style>
</head><body>
<div id="bian">
<div id="top"><br><h1>房贷计算器2020</h1>
</div>
<div id="zong">
<div id=app><div id="daikuanleibie"><p style="color: red; font-weight: bold;">请您填写:</p>贷款类别：<input type="radio" name="daikuan" checked="checked">商业贷款<input type="radio" name="daikuan" >公积金贷款<input type="radio" name="daikuan">组合型贷款</div><div id="two">计算方式：<input type="radio" name="fangshi"  checked="checked" @click="ooo">根据面积、单价计算<br><template v-if="ccc"><p>单价：<input type="text" v-model="danjia" >元/平米</p><p>面积：<input type="text" v-model="mianji">平方米</p>按揭成数:<select style="color: #ff0000;" id="chengshu"><option value="0.1">1成</option><option value="0.3">3成</option><option value="0.7" selected="true">7成</option></select></template></br><input type="radio" name="fangshi"  @click="aaa">根据贷款总额计算<template v-if="bbb"><p>贷款总额：<input type="text" >万元</p></template></div><div id="three"><p>按揭年数：<select style="color: #ff0000;" id="nianshu"><option value="10">10年</option><option value="20" selected="true">20年</option></select></p></div><div id="four"><p>贷款利率：<select style="color: #ff0000;" id="lilv" onchange="cll(this)"><option value="6.37">2020年10月1日利率上限(1.3)倍</option><option value="3.43" >2020年10月1日利率下限(7折)</option><option value="4.90"  selected="true">2020年10月1日基准利率</option></select></p><p><input type="text" name="kk" value="4.90" size="5">%</p></div><div id="five"><p>还款方式：<input type="radio" name="huankuan" >等额本息<input type="radio" name="huankuan">等额本金</p></div><div id="six"><input type="button" value="开始计算"  @click="kaishi()"><input type="reset" value="重新填写" ></div>
</div><div id="you"><br>
<p style="color: #ff0000; font-weight: bold;">
查看结果
</p>
<p>房款总额：<input type="text" name="k1" value="" readonly>元</p>
<p>贷款总额：<input type="text" name="k2" readonly>元</p>
<p>还款总额：<input type="text" name="k3" readonly>元</p>
<p>支付利息款：<input type="text" name="k4" readonly>元</p>
<p>首期付款：<input type="text" name="k5" readonly>元</p>
<p>贷款月数：<input type="text" name="k6" readonly></p>
<p>月均还款：<input type="text" name="k7" readonly>元</p>
<p style="text-align: right;">*以上结果仅供参考</p>
</div>
</div> <div id="xia"><font size="4">房贷计算器2020：房贷利率已经更新至2020年10月1日</font><p>等额本息还款：把按揭贷款的本金总额与利息总额相加，然后平均分摊到还款期限的每个月中。作为还款人，每个月还给银行固定金额，但每月还款额中的本金比重逐月递增、利息比重逐月递减。</p><p>等额本金还款：将本金分摊到每个月内,同时付清上一交易日至本次还款日之间的利息。这种还款方式相对等额本息而言,总的利息支出较低,但是前期支付的本金和利息较多,还款负担逐月递减。</p><p>2020年公积金贷款最高额度说明（具体规定参考地方房管局文件）</p><p>北京：市管公积金贷款最高120万元，国管公积金最高贷款120万元</p><p>上海：个人公积金贷款最高60万元，家庭最高贷款120万元</p><p>广州：个人公积金贷款最高60万元，夫妻双方最高贷款100万元</p><p>成都：个人公积金贷款最高40万元，家庭公积金贷款最高70万元，成都公积金贷款额度为个人缴存余额20倍</p>
</div>
</div>
<script>
function cll (id){document.getElementsByName("kk")[0].value=id.value;}
var vm=new Vue({el:'#zong',data:{ccc:true,bbb:false,mianji:'',danjia:'',},methods: {ooo () {if (this.ccc === false) {this.ccc = trueconsole.log(this.ccc)}this.bbb = false},aaa () {if (this.bbb === false) {this.bbb = trueconsole.log(this.bbb)   }this.ccc = false},kaishi(){var kone=document.getElementsByName("k1")[0].value=this.danjia*this.mianjivar cheng=document.getElementById("chengshu")var index =cheng.valuevar nian=document.getElementById("nianshu")var index1=nian.value*12var li=document.getElementById("lilv")var index2=li.value/100/12var ktwo=document.getElementsByName("k2")[0].value=index*kone       var kfor=document.getElementsByName("k4")[0].value=index1*ktwo*index2*Math.pow(1+index2,index1)/(Math.pow(1+index2,index1)-1)-ktwovar kthr=document.getElementsByName("k3")[0].value=kfor+ktwovar kfiv=document.getElementsByName("k5")[0].value=kone-ktwovar ksix=document.getElementsByName("k6")[0].value=index1+"(月)"var ksev=document.getElementsByName("k7")[0].value=kthr/index1},},})</script>
</body>
</html>

这是代码成果图：

这个只能做到根据面积、单价计算这一项功能，通过计算输入的数据，计算后右侧得出结果。

房贷计算器。在左侧输入数据，点击“开始计算”后，右侧右侧计算出结果后直接显示出来。相关推荐

android 点击图标重启,Android应用第一次安装成功点击“打开”后Home键切出应用后再点击桌面图标返回导致应用重启问题的解决方法...
Android应用第一次安装成功点击"打开"后Home键切出应用后再点击桌面图标返回导致应用重启问题的解决方法 if((getIntent().getFlags() & I ...
Android应用第一次安装成功点击“打开”后Home键切出应用后再点击桌面图标返回导致应用重启问题...
最近项目中遇到一个问题,用户第一次安装应用在系统的安装器安装完成界面有"完成"和"打开"两个按钮. 当用户点击"打开"按钮进入用户注册页面进 ...
JavaScript 案例：房贷计算器
数据表 A B C 平米单价 70000.00 元/平米租金 382.50 元/平米/月物业费 50.50 元/平米/月面积 200 平米曾付比例 40% 成 (请设定三成半或以上) 货代利息 ...
JavaScript：综合案例---房贷计算器的实现
房贷计算器的实现 (可以使用的编辑器:webStrom.subLime.notePad++.editPlus) 输入数据: 平方单价 70,000.00 元/平方 B1 租金 382.50 元/平方 ...
基于QT（C++）实现房贷计算器【100010502】
1.题目要求及分析本次大作业的要求是完成一个房贷计算器的设计,实现商业贷款.公积金贷款和组合贷款的利息计算三种功能.并且使用 Qt 或其他的界面库设计人机交互界面,要求界面友好方便使用.并且必须使用 ...
【寻找最佳小程序】10期：小小房贷计算器——快捷、易用，小白购房必备
为了更好地展示这些优秀的小程序,展现背后的开发者/团队风彩,CSDN特别推出了[寻找最佳小程序]系列访谈栏目,以期分享每款优秀小程序背后的产品创意与研发故事,探究创新性应用场景,发现不一样的创业机会. ...
jQueryEasyUI实现房贷计算器详细教程2--jQuery部分
1.从载入JavaScript开始 jQuery 是一个 JavaScript 库,极大地简化了 JavaScript 编程.这一部分介绍下载和载入jQuery. 源代码: <script sr ...
jQueryEasyUI实现房贷计算器详细教程1--HTML部分
1.HTML文件的基本构成我们从最基础的一段HTML代码开始编程: <!DOCTYPE html> <html><head><meta charset=&q ...
Windows phone7 软件发布：理财计算器（包括wp7房贷计算器，wp7个税计算器，wp7存款利息计算器）...
前一段时间,需要经常用到贷款计算器的功能,这样有利于我们做出更好的决策.但是我们只能通过银行的工作人员的计算器来计算,给我带来了极大的不便和损失,由此便萌生了开发一个Windows phone7版的贷 ...

房贷计算器。在左侧输入数据，点击“开始计算”后，右侧右侧计算出结果后直接显示出来。

房贷计算器。在左侧输入数据，点击“开始计算”后，右侧右侧计算出结果后直接显示出来。相关推荐

最新文章

热门文章