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/ 注冊一个帐号,然后申请域名,你能够看到,费 ...
随机推荐
- [转]iOS：批量导入图片和视频到模拟器的相册
IOS开发中我们经常会用到模拟器调试,模拟器有个主要的好处就是程序启动块,最重要的是如果没有证书的话,我们就只能在模拟器上调试了.使用模拟器调试时我们可能碰到需要从系统相册选择图片的情况,特别是做图片 ...
- java简单的运算符和表达式
1.运算符的运算级别分为很多层,第一层是(),括号的运算级别最高. 第二层是+,——,*,/,加,减,乘,除 第三层是==,等于号. 第四层是&&,||,或 与 且 && ...
- XMPPManager 解析
一.用户登录流程 用户登录流程.png 注意:XMPP核心文件,基于TCP的XML流的传输,XMPPFrame框架是通过代理的方式实现消息传递的 实现用户登录的步骤如下: 1.实例化XMPPStrea ...
- JS设计模式之单体模式（Singleton）
单体模式作为一种软件开发模式在众多面向对象语言中得到了广泛的使用,在javascript中,单体模式也是使用非常广泛的,但是由于javascript语言拥有其独特的面向对象方式,导致其和一些传统面向对 ...
- SSAS Tabular模式中关系设置不支持直接设置多对多？
在网上文档发现一篇文章 微软BI 之SSAS 系列 - 多维数据集维度用法之一 引用维度 Referenced Dimension 有涉及到SSAS模型的关系设置 但是本人的基于表格模型的 没有关系可 ...
- Q312 戳气球
有 n 个气球,编号为0 到 n-1,每个气球上都标有一个数字,这些数字存在数组 nums 中. 现在要求你戳破所有的气球.每当你戳破一个气球 i 时,你可以获得 nums[left] * nums[ ...
- Java的三个基础排序算法（其余将在以后补充）
第一个:冒泡排序算法 原理:相邻的两个值进行比较,如果前面的比后面的大就交换位置 eg:假设有5个元素的一个array 第一次:会比较4次,将最大的值放在最右边 第二次:会比较3次,又排出剩余4个元素 ...
- redis 持久化之 rdb 快照持久化
解释1: 虽然redis是单进程,但是它有一个单独的子进程进行rdb操作,为了保证的数据的一致性,当进行rdb操作失败的时候,主进程就停止写入 所以才有了stop-write-on-bgsave-er ...
- mongo 固定集合，大文件存储，简单优化 + 三招解决MongoDB的磁盘IO问题
1.固定集合 > db.createCollection(, max:});//固定集合 必须 显式创建. 设置capped为true, 集合总大小xxx字节, [集合中json个数max] { ...
- unity批量设置图片为etc2格式或者astc格式
网上找了半天,没一个能用的,干脆自己写个,直接拷贝这个脚本就行 这个是ios版本的,安卓的话写在注释里面,去掉注释就能用了 现在ios支持一种新格式叫astc比原本的pvrtc压缩比更高,而且质量更高 ...