JS计算十万块钱 分31期 利息万分之五 每个月的还款数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TEST</title>
</head>
<body>
<script type="text/javascript">
let lx = 0.0005; // 利率
let ben = 100000; // 本金
let time = 31; // 分期数
let huan = 0; // 一个月还多少
let yi = 0; // 总利息
let sheng = 0; // 未还本金
let all = 0; // 总金额
for (let i = 0; i < time; i++) {
// 一期还款金额 = （本金/分期数）+（（本金-已经还款金额）*利率）
huan = ((ben/time)+((ben -(ben/time)*i)*lx)*30);
yi += (((ben -(ben/time)*i)*lx)*30);
all += huan;
sheng = (ben - (ben/time)*i);
console.log("待还本金："+parseInt(sheng)+" => 还款金额："+parseInt(huan)+" = 本金："+parseInt(ben/time)+" + 利息："+parseInt((ben -(ben/time)*i)*lx)*30)
}
console.warn("总金额："+parseInt(all))
console.warn("总利息："+parseInt(yi))
console.error("分"+time+"个月还，一个月还："+parseInt(all/time))
</script>
</body>
</html>
由于我在网上找不到这种算法的在线计算器，所以就自己写一个玩玩，如下图：
提示：假如每个月都是30天
完善思路：把每个月30天改为对应月份的天数，和显示还款日期。
------------------------------------------------------- 2019-03-18更新------------------------------------------------------------
由于我们是有追求的人，直接用console.log()打印显得太low,自己都看不下去，所以决定给它个皮肤，加入对应月份天数和还款日期，好见人。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>zhengshize</title>
<link
rel="stylesheet"
type="text/css"
href="http://unpkg.com/iview/dist/styles/iview.css"
/>
<script
type="text/javascript"
src="http://vuejs.org/js/vue.min.js"
></script>
<script
type="text/javascript"
src="http://unpkg.com/iview/dist/iview.min.js"
></script>
<style>
.content {
margin: 30px auto;
max-width:1100px;
}
</style>
</head> <body>
<div id="app">
<div class="content">
<Row>
<i-col span=20>
<i-form label-width="80" inline>
<form-item label="本金：" >
<i-input type="text" v-model="ben" @on-blur='calc()'/>
</form-item>
<form-item label="利率：">
<i-input type="text" v-model="lx" @on-blur='calc()'/>
</form-item>
<form-item label="分期数：">
<i-input type="text" v-model="time" @on-blur='calc()'/>
</form-item>
</i-form>
</i-col>
<i-col span=4>
<i-button type="primary" @click="calc()">计算</i-button>
</i-col>
</Row>
<Alert>
<Row style="text-align:center">
<i-col span=6>总还款金额：{{all | zheng}}</i-col>
<i-col span=6>总利息：{{all_lx | zheng}}</i-col>
<i-col span=6>平均每月需还：{{all/time | zheng}}</i-col>
<i-col span=6>平均每月利息：{{all_lx/time | zheng}}</i-col>
</Row>
</Alert>
<i-table :loading="loading" :columns="columns1" :data="data1" size="small" border></i-table> </div>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
loading: true,
ben:120000,
lx:0.000288,
time: 24,
all:0,
all_lx:0,
columns1:[
{
title: '还款日期',
key: 'day'
},
{
title: '平均每月需还',
key: 'ping'
},
{
title: '平均每月利息',
key: 'ping_lx'
},
{
title: '待还本金',
key: 'ben'
},
{
title: '还款金额',
key: 'er'
},
{
title: '本金',
key: 'jin'
},
{
title: '利息',
key: 'xi'
},
{
title: '当前月份天数',
key: 'num'
},
],
data1:[
{
day:"",
ping:"",
ping_lx:"",
ben:"",
er:"",
jin:"",
xi:"",
num:"",
}
],
},
methods: {
calc() {
let self = this;
let lx = this.lx; // 利率
let ben = this.ben; // 本金
let time = this.time; // 分期数
let huan = 0; // 一个月还多少
let yi = 0; // 总利息
let sheng = 0; // 未还本金
let all = 0; // 总金额
let dt = new Date(); self.loading = true;
this.data1 = []; for (let i = 0; i < time; i++) {
dt.setMonth(dt.getMonth() + 1);
let y = dt.getFullYear();
let m =
dt.getMonth() + 1 < 10
? "0" + (dt.getMonth() + 1)
: dt.getMonth() + 1;
let d = dt.getDate()<10 ? "0"+ dt.getDate() : dt.getDate();
// 一期还款金额 = （本金/分期数）+（（本金-已经还款金额）*利率）
let mylx = (ben - (ben / time) * i) * lx * 30;
// let mylx = (ben - (ben / time) * i) * lx * new Date(y, m, 0).getDate();
huan = ben / time + mylx;
yi += mylx;
all += huan;
sheng = ben - (ben / time) * i; this.data1.push({day:y+"-"+m+"-"+d,ping:"",ping_lx:"",ben: parseInt(sheng),er: parseInt(huan),jin:parseInt(ben/time),xi: parseInt(mylx),num: (new Date(y, m, 0).getDate())}) }
// 平均每月需还金额
for (let k = 0; k < this.data1.length; k++) {
this.data1[k].ping = parseInt(all/time);
this.data1[k].ping_lx = parseInt(yi/time);
}
this.all = parseInt(all);
this.all_lx = parseInt(yi);
setTimeout(() => {
self.loading = false;
},300);
}
},
created(){
this.calc();
},
filters: {
zheng(data) {
return parseInt(data) || 0;
}
}
});
</script>
</body>
</html>
------------------------------------------------------- 2019-03-19更新-----------------------------------------------------------
今天又看了一下，然后改了2个地方
1. 加入序号，知道什么时候还的是第几期
2. 加入可以选中当前行，对，它就是这个月的讨债仔
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>zhengshize</title>
<link
rel="stylesheet"
type="text/css"
href="http://unpkg.com/iview/dist/styles/iview.css"
/>
<script
type="text/javascript"
src="http://vuejs.org/js/vue.min.js"
></script>
<script
type="text/javascript"
src="http://unpkg.com/iview/dist/iview.min.js"
></script>
<style>
.content {
margin: 30px auto;
max-width:1100px;
}
</style>
</head> <body>
<div id="app">
<div class="content">
<Row>
<i-col span=20>
<i-form label-width="80" inline>
<form-item label="本金：" >
<i-input type="text" v-model="ben" @on-blur='calc()'/>
</form-item>
<form-item label="利率：">
<i-input type="text" v-model="lx" @on-blur='calc()'/>
</form-item>
<form-item label="分期数：">
<i-input type="text" v-model="time" @on-blur='calc()'/>
</form-item>
</i-form>
</i-col>
<i-col span=4>
<i-button type="primary" @click="calc()">计算</i-button>
</i-col>
</Row>
<Alert>
<Row style="text-align:center">
<i-col span=6>总还款金额：{{all | zheng}}</i-col>
<i-col span=6>总利息：{{all_lx | zheng}}</i-col>
<i-col span=6>平均每月需还：{{all/time | zheng}}</i-col>
<i-col span=6>平均每月利息：{{all_lx/time | zheng}}</i-col>
</Row>
</Alert>
<i-table :loading="loading" :columns="columns1" :data="data1" size="small" border highlight-row></i-table> </div>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
loading: true,
ben:120000,
lx:0.000288,
time: 24,
all:0,
all_lx:0,
columns1:[
{
type:"index",
width:68,
title:"期数",
align:'center'
},
{
title: '还款日期',
key: 'day'
},
{
title: '平均每月需还',
key: 'ping'
},
{
title: '平均每月利息',
key: 'ping_lx'
},
{
title: '待还本金',
key: 'ben'
},
{
title: '还款金额',
key: 'er'
},
{
title: '本金',
key: 'jin'
},
{
title: '利息',
key: 'xi'
},
{
title: '当前月份天数',
key: 'num'
},
],
data1:[
{
day:"",
ping:"",
ping_lx:"",
ben:"",
er:"",
jin:"",
xi:"",
num:"",
}
],
},
methods: {
calc() {
let self = this;
let lx = this.lx; // 利率
let ben = this.ben; // 本金
let time = this.time; // 分期数
let huan = 0; // 一个月还多少
let yi = 0; // 总利息
let sheng = 0; // 未还本金
let all = 0; // 总金额
let dt = new Date(); self.loading = true;
this.data1 = []; for (let i = 0; i < time; i++) {
dt.setMonth(dt.getMonth() + 1);
let y = dt.getFullYear();
let m =
dt.getMonth() + 1 < 10
? "0" + (dt.getMonth() + 1)
: dt.getMonth() + 1;
let d = dt.getDate()<10 ? "0"+ dt.getDate() : dt.getDate();
// 一期还款金额 = （本金/分期数）+（（本金-已经还款金额）*利率）
let mylx = (ben - (ben / time) * i) * lx * 30;
// let mylx = (ben - (ben / time) * i) * lx * new Date(y, m, 0).getDate();
huan = ben / time + mylx;
yi += mylx;
all += huan;
sheng = ben - (ben / time) * i; this.data1.push({day:y+"-"+m+"-"+d,ping:"",ping_lx:"",ben: parseInt(sheng),er: parseInt(huan),jin:parseInt(ben/time),xi: parseInt(mylx),num: (new Date(y, m, 0).getDate())}) }
// 平均每月需还金额
for (let k = 0; k < this.data1.length; k++) {
this.data1[k].ping = parseInt(all/time);
this.data1[k].ping_lx = parseInt(yi/time);
}
this.all = parseInt(all);
this.all_lx = parseInt(yi);
setTimeout(() => {
self.loading = false;
},300);
}
},
created(){
this.calc();
},
filters: {
zheng(data) {
return parseInt(data) || 0;
}
}
});
</script>
</body>
</html>
------------------------------------------------------- 2019-04-21更新-----------------------------------------------------------
今天又又看了一下，然后改了1个地方
1. 增加“开始日期”
默认是当前日期，如果想从1号开始算起，就选1号，还款日期也会相应改变：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>zhengshize</title>
<link
rel="stylesheet"
type="text/css"
href="http://unpkg.com/iview/dist/styles/iview.css"
/>
<script
type="text/javascript"
src="http://vuejs.org/js/vue.min.js"
></script>
<script
type="text/javascript"
src="http://unpkg.com/iview/dist/iview.min.js"
></script>
<style>
.content {
margin: 30px auto;
max-width:1000px;
}
.input_width{
width: 120px;
}
</style>
</head> <body>
<div id="app">
<div class="content">
<Row>
<i-col span=21>
<i-form label-width="80" inline>
<form-item label="本金：" >
<i-input type="text" class="input_width" v-model="ben" @on-blur='calc()'/>
</form-item>
<form-item label="利率：">
<i-input type="text" class="input_width" v-model="lx" @on-blur='calc()'/>
</form-item>
<form-item label="分期数：">
<Input-Number type="text" class="input_width" v-model="time" @on-blur='calc()'/>
</form-item>
<form-item label="开始日期：">
<Date-Picker type="date" class="input_width" v-model="day" format="yyyy年MM月dd日" placeholder=""></Date-Picker>
</form-item>
</i-form>
</i-col>
<i-col span=3>
<i-button type="primary" @click="calc()">计算</i-button>
</i-col>
</Row>
<Alert>
<Row style="text-align:center">
<i-col span=6>总还款金额：<strong>{{all | zheng}}</strong></i-col>
<i-col span=6>总利息：<strong>{{all_lx | zheng}}</strong></i-col>
<i-col span=6>平均每月需还：<strong>{{all/time | zheng}}</strong></i-col>
<i-col span=6>平均每月利息：<strong>{{all_lx/time | zheng}}</strong></i-col>
</Row>
</Alert>
<i-table :loading="loading" :columns="columns1" :data="data1" size="small" border highlight-row></i-table>
</div>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
loading: true,
day: "",
ben:120000,
lx:0.000288,
time: 24,
all:0,
all_lx:0,
columns1:[
{
type:"index",
width:70,
title:"期数",
align:'center'
},
{
title: '还款日期',
width:100,
key: 'day'
},
{
title: '平均每月需还',
key: 'ping'
},
{
title: '平均每月利息',
key: 'ping_lx'
},
{
title: '待还本金',
key: 'ben'
},
{
title: '还款金额',
key: 'er'
},
{
title: '本金',
key: 'jin'
},
{
title: '利息',
key: 'xi'
},
{
title: '当前月份天数',
width:110,
key: 'num'
},
],
data1:[
{
day: "",
ping:"",
ping_lx:"",
ben:"",
er:"",
jin:"",
xi:"",
num:"",
}
],
},
methods: {
calc() {
let self = this;
let lx = this.lx; // 利率
let ben = this.ben; // 本金
let time = this.time; // 分期数
let huan = 0; // 一个月还多少
let yi = 0; // 总利息
let sheng = 0; // 未还本金
let all = 0; // 总金额
let dt = this.day || new Date(); // 如果没有选择开始时间，默认当前日期 self.loading = true;
this.data1 = []; for (let i = 0; i < time; i++) {
dt.setMonth(dt.getMonth() + 1);
let y = dt.getFullYear();
let m =
dt.getMonth() + 1 < 10
? "0" + (dt.getMonth() + 1)
: dt.getMonth() + 1;
let d = dt.getDate()<10 ? "0"+ dt.getDate() : dt.getDate();
// 一期还款金额 = （本金/分期数）+（（本金-已经还款金额）*利率）
let mylx = (ben - (ben / time) * i) * lx * 30;
// let mylx = (ben - (ben / time) * i) * lx * new Date(y, m, 0).getDate();
huan = ben / time + mylx;
yi += mylx;
all += huan;
sheng = ben - (ben / time) * i; this.data1.push({day:y+"-"+m+"-"+d,ping:"",ping_lx:"",ben: parseInt(sheng),er: parseInt(huan),jin:parseInt(ben/time),xi: parseInt(mylx),num: (new Date(y, m, 0).getDate())}) }
// 平均每月需还金额
for (let k = 0; k < this.data1.length; k++) {
this.data1[k].ping = parseInt(all/time);
this.data1[k].ping_lx = parseInt(yi/time);
}
this.all = parseInt(all);
this.all_lx = parseInt(yi);
setTimeout(() => {
self.loading = false;
},300);
}
},
created(){
this.calc();
// 初始化显示当前日期
this.day = new Date();
},
mounted(){ },
filters: {
zheng(data) {
return parseInt(data) || 0;
}
}
});
</script>
</body>
</html>
JS计算十万块钱 分31期 利息万分之五 每个月的还款数的更多相关文章
- 大三那年在某宝8块钱买的.NET视频决定了我的职业生涯
前言 谨以此文献给那些还在大学中迷茫的莘莘学子们! 韩愈在<师说>中提出了作为师者应该做的三件事:传道.授业.解惑. 1.传道:培养学生的道德观 2.授业:传授学生专业技能 3.解惑:解答 ...
- 为了讲明白继承和super、this关键字，群主发了20块钱群红包
摘要:以群主发红包为例,带你深入了解继承和super.this关键字. 本文分享自华为云社区<群主发红包带你深入了解继承和super.this关键字>,作者:共饮一杯无 . 需求 群主发随 ...
- JS计算字符串所占字节数
最近项目有个需求要用js计算一串字符串写入到localStorage里所占的内存,众所周知的,js是使用Unicode编码的.而Unicode的实现有N种,其中用的最多的就是UTF-8和UTF-16. ...
- JS实现倒计时(天数,时,分,秒)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" > <titl ...
- Vue.js 计算属性是什么
Vue.js 计算属性是什么 一.总结 一句话总结: 模板 表达式 维护 在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护 ...
- ACM_给你100块钱
给你100块钱 Time Limit: 2000/1000ms (Java/Others) Problem Description: 小光见到昨晚旭能神没拿到一血,又损失了一百块,很同情他.但是为了不 ...
- 后台开发 3个题目 array_chunk, 100块钱找零钱(动态规划 dynamic programming), 双向循环链表 llist 删除节点
1. array_chunk 实现 http://php.net/manual/en/function.array-chunk.php <?php function my_array_chunk ...
- js计算2个日期相差的天数，两个日期相差的天数，日期相隔天数
js计算2个日期相差的天数,两个日期相差的天数,日期相隔天数 >>>>>>>>>>>>>>>>>& ...
- 自己做站点(二) 20块钱搞定一个企业站：域名&空间申请
域名注冊的话,推荐大家用新网,由于申请费用确实非常低,但续费的价格还是比較高的,所以不妨多申请几年.打开站点: http://www.xinnet.com/ 注冊一个帐号,然后申请域名,你能够看到,费 ...
随机推荐
- UVALive-7457-Discrete Logarithm Problem（取模运算）
原题链接 额,一直在理解题意在纠结看不懂,后来才恍然大悟 题意:定义一种新运算 a × b = a * b mod p : 已知条件给定一个p 求 x 这里用到同余与模运算乘法公式:a * b % n ...
- leetcode-479-Largest Palindrome Product（找到两个乘数相乘得到的最大的回文数）
题目描述: Find the largest palindrome made from the product of two n-digit numbers. Since the result cou ...
- sort函数详解（史上最完整QAQ）
1.sort 使用:#include <algorithm> using namespace std; 作用:排序 时间复杂度:n*lg(n) 实现原理:sort并不是简单的快速排序, ...
- git配置教程
一.配置ssh 1.检查本机是否有ssh key设置 如果没有则提示: No such file or directory 如果有则进入~/.ssh路径下(ls查看当前路径文件,rm删除所有文件) 2 ...
- gettimeofday
作用: 需要打印代码执行到某处的时间,或者需要计算程序执行的时间差(精确到微妙级).这时会用到gettimeofday函数,它可以返回自1970-01-01 00:00:00到现在经历的秒数. 原型: ...
- Mac 10.12安装SecureCRT
下载: (链接: https://pan.baidu.com/s/1eSNBoFC 密码: sztc) 安装参考: http://www.cnblogs.com/EasonJim/p/7568734. ...
- MFRC522开发笔记
一.了解基本概念 ①ISO-14443A协议:( 国际标准化组织:International Organization for Standardization)RFID协议的一种; PICC:临近 ...
- java io流 数据流 DataInputStream、DataOutputStream、ByteArrayInputStream、ByteArrayOutputStream
例子程序: package io; import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import ...
- 在JSP中常见问题,防止SpringMVC拦截器拦截js等静态资源文件的解决方案
方案一.拦截器中增加针对静态资源不进行过滤(涉及spring-mvc.xml) <mvc:resources location="/" mapping="/**/* ...
- spring中redistemplate不能用通配符keys查出相应Key的问题
有个业务中需要删除某个前缀的所有Redis缓存,于是用RedisTemplate的keys方法先查出所有合适的key,再遍历删除.但是在keys(patten+"*")时每次取出的 ...