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/ 注冊一个帐号,然后申请域名,你能够看到,费 ...
随机推荐
- hive一些基本用法
1.hive中的数据库表的类型有两种,一种是managed,一种是external :managed表类型是指传入的数据放在hive默认的储存位置下,而external 表类型可以将数据 放在任意的 ...
- 分布式系统的Raft算法学习笔记
摘取自: http://mp.weixin.qq.com/s?__biz=MzIyMTQ1NDE0MQ==&mid=2247483979&idx=1&sn=12864382e ...
- uml地址栏参数特殊字符处理
转义方法: function URLencode(sStr) { return escape(sStr).replace(/\+/g, '%2B').replace(/\"/g,'%22') ...
- 语音转文字小工具开发Python
# -*- coding: utf- -*- import requests import re import os import time from aip import AipSpeech fro ...
- js 弹性导航
<style> *{margin:0;padding:0;} #box{height:50px;float:left;position:relative;background:#f90;} ...
- symfony4 404页面未找到
symfony4 404页面未找到 安装好symfony4后,发现除了首页能正常显示,其他页面如/_profiler_/等其他创建的router访问都显示The requested URL /xxx ...
- dede修改文章页命名规则
一.DEDEcms 修改默认文章命名规则 1.单独添加分类默认修改,修改文件:include/common.inc.php. 大概在251行文档的命名规则 $cfg_df_namerule = '{ ...
- ToolkitScriptManager vs. ScriptManager 关于“只能向页面中添加 ScriptManager 的一个实例”讨论
在使用ASP.NET设计AJAX功能网页时,需要首先声明ToolkitScriptManager或者ScriptManager控件,这些全局的脚本核心控制,然后才能使用众多的AJAX控件.如果没有创建 ...
- [问题解决]gradle编译失败系统找不到指定的文件
[问题解决]gradle编译失败系统找不到指定的文件 问题描述 Error:C:\Users\diql.gradle\caches\2.14.1\scripts-remapped\settings_9 ...
- 用table布局和div布局的区别
table布局的渲染是将整个table全部渲染出来,如果网路不给力的情况下,整个table会卡死在页面div布局的话,页面渲染,会一个一个的div渲染,网页出现会一个一个出来,不管网速怎样,不会全局卡 ...