我正在参加「码上掘金挑战赛」详情请看:码上掘金挑战赛来了!
各位大佬准备买房了么? 你知道贷款30年和贷款100年,首月还款额会降低多少么? 让我们用vue
写个房贷计算器来告诉你吧。
各位前端大佬,不要笑话,运维小弟献丑了。
效果展示
码上掘金
运行展示
为了直观方便,我们列一个表格吧
贷款金额: 100W 年利率: 5.8% | ||
---|---|---|
贷款时间 | 等额本金(首月还款) | 等额本息(首月还款) |
30年 | ¥7,611.11 | ¥5,867.53 |
50年 | ¥6,500.00 | ¥5,116.85 |
100年 | ¥5,666.67 | ¥4,848.22 |
1000年 | ¥4,916.67 | ¥4,833.33 |
初始化项目
如果你已经使用过【码上掘金】创建项目,可以略过本段落。
我们打开【码上掘金】(code.juejin.cn/) ,选择【新建代码片段】【新建空白片段】来创建拥有vue.js
环境的项目。
创建完毕后,我们引入vue.js
,在【Script】右边的设置按钮,我们点击后,可以弹出引用依赖界面。
我们在【添加依赖资源】处填写上: cdn.jsdelivr.net/npm/vue@2.6…
至此,我们项目初始化便完成了。
我们写个demo
尝试下
如上,我们编写了一个demo
且顺利运行,就证明环境设置的没问题。
页面编写
我们设想我们整个页面分为2部分,左边部分为用户输入,右边为展示页面,具体图如下:
计算展示结果,我们就用表格套出来就可以了,这个暂不介绍,我们着重要介绍下用户输入部分。作为一款房贷计算器,最主要的功能是让用户输入 贷款额、贷款利率、贷款年限以及贷款方式,所以,我们很容易写出骨架代码来,如下:
<div id="app">
<div id="op">
<h1>房贷计算器</h1>
<label>贷款金额:</label>
<input class="inputNum" type="number">
<label>万</label>
<br />
<label>贷款利率: </label>
<input class="inputNum" type="number">
<label>%</label>
<br />
<label>贷款方式: </label>
<input type="radio" name="modes" value="type1">
等额本金
<label></label>
<input type="radio" name="modes" value="type2">
等额本息
<br />
<label> 贷款年限: </label>
<input class="inputNum" type="number">
<label>年</label>
<br />
<br />
<button @click="getInterestInfo">计算利率</button>
<br />
<br />
</div>
</div>
就是几个input
框 再加 一个 按钮,就可以完成该需求,这里不过多做展示,我们稍微修饰下css
,再看看效果,这里就不贴css
代码了哈。
哎,是不是感觉清爽很多了呢。
贷款计算方法
贷款分为【等额本金】 和 【等额本息】 ,我们简单介绍下2者的区别以及算法。
我们假设贷款30W,贷款年利率:5.8% ,贷款年限: 30年。
我们来看下使用等额本金如何计算的 。
计算贷款月份 和 贷款月利率
已知贷款年限为30年,所以贷款月份为: 30 * 12 == 360(月)
贷款月利率,我们就保留小数点后4位就可以了。
贷款年利率为: 5.8% ,所以贷款月利率为: 5.8% / 12 == 0.4833%
每个月偿还的本金为: 30w / 360(月) == 833.33(元)
第一个月偿还的利息为: 30w * 0.4833% == 1449.9
所以第一个月总还款额: 1449.9 + 833.33 == 2283.23
第二个月偿还的本金和第一个月偿还的本金一致,也是833.33
,只是偿还的利息不同了。
第二个月偿还的利息: (30w-833.33) * 0.4833% == 1445.96
所以第二个月总还款额: 1445.96 + 833.33 == 2279.29
后面的以此类推
直至最后一个月还款额仅为本金: 833.33
我们再来看看等额本息呢
等额本金较为复杂,这里直接给出计算公式就可以了,如果需要推理过程,可以在网上搜搜看。
我们带入我们上面的公式
结果为: x = 1670.18
vue编写
上一步我们已经推导了等额本息 和 等额本息的算法,我们来看下程序应该如何编写呢,我们将按钮绑定一个点击事件,传到方法: getInterestInfo
,我们先要计算出贷款总额、贷款月利率 以及 贷款月数,代码如下:
var aAmount = this.amount * 10000
var aMonInterest = this.interest / 100 / 12
var aMonth = this.years * 12
如上代码,是这样的,我们传入的金额单位是(万),所以需要乘以10000
,而传入的利率是年百分利率,所以我们计算月利率,需要先除以100
再除以12
,传入的是年数,所以我们要计算月数,需要乘以12
。
我们分别来看下等额本金和等额本息计算方法:
console.log("等额本息")
// 计算方法
var fenzi = aAmount * aMonInterest * Math.pow((1+aMonInterest),aMonth)
var fenmu = Math.pow((1+aMonInterest),aMonth) - 1
var monRepayment = fenzi / fenmu
var sumRepayment = monRepayment * aMonth
console.log("月还款额: " , monRepayment.toFixed(2) , " 总还款额: " , sumRepayment.toFixed(2) , " 总利息: " , (sumRepayment - aAmount).toFixed(2))
如上代码是套用了公式:
最后的结果保留了2位。
而等额本金,我们计算方法如下:
console.log("等额本金")
// 计算方法
var firstAccrual = (aAmount * aMonInterest).toFixed(2)
var firstRepay = ((aAmount / aMonth) + (aAmount * aMonInterest)).toFixed(2)
console.log("第一个月还款额: " , firstRepay)
var temp = aAmount
var sum = 0
for(let i=1;i<=aMonth;i++) {
sum = sum + (aAmount / aMonth) + (temp * aMonInterest)
temp = temp - (aAmount / aMonth)
}
console.log("总还款额: " , sum.toFixed(2) , "总利息: " , (sum-aAmount).toFixed(2))
如上代码,我们使用的是暴力求解,即: 我们循环贷款月数,而后再来计算每个月的利息,最后加上本金就是本月还款额,而后将每个月的还款数叠加。
不管是等额本金和等额本息,我们计算总利息的方法都是一样的,那就是使用还款总额 减去 借款本金 就是总利息了。
如上还有很多细节没有介绍到,大家可以看源码分析下。
总结
由于篇幅的关系,我们没有过多介绍,而是单独将等额本息和等额本金计算方法拉出来分析了一波,大家如果对其他方面还感兴趣,可以点进文章上面【码上掘金】进行查看。好了,现在知道贷款30年和贷款100年,谁更划算了吧。有意思吧,来,动动小手指,快来试试吧。