1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  6. <title>TEST</title>
  7. </head>
  8. <body>
  9. <script type="text/javascript">
  10. let lx = 0.0005; // 利率
  11. let ben = 100000; // 本金
  12. let time = 31; // 分期数
  13. let huan = 0; // 一个月还多少
  14. let yi = 0; // 总利息
  15. let sheng = 0; // 未还本金
  16. let all = 0; // 总金额
  17. for (let i = 0; i < time; i++) {
  18. // 一期还款金额 = (本金/分期数)+((本金-已经还款金额)*利率)
  19. huan = ((ben/time)+((ben -(ben/time)*i)*lx)*30);
  20. yi += (((ben -(ben/time)*i)*lx)*30);
  21. all += huan;
  22. sheng = (ben - (ben/time)*i);
  23. console.log("待还本金:"+parseInt(sheng)+" => 还款金额:"+parseInt(huan)+" = 本金:"+parseInt(ben/time)+" + 利息:"+parseInt((ben -(ben/time)*i)*lx)*30)
  24. }
  25. console.warn("总金额:"+parseInt(all))
  26. console.warn("总利息:"+parseInt(yi))
  27. console.error("分"+time+"个月还,一个月还:"+parseInt(all/time))
  28. </script>
  29. </body>
  30. </html>

由于我在网上找不到这种算法的在线计算器,所以就自己写一个玩玩,如下图:

提示:假如每个月都是30天

完善思路:把每个月30天改为对应月份的天数,和显示还款日期。

------------------------------------------------------- 2019-03-18更新------------------------------------------------------------

由于我们是有追求的人,直接用console.log()打印显得太low,自己都看不下去,所以决定给它个皮肤,加入对应月份天数和还款日期,好见人。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  6. <title>zhengshize</title>
  7. <link
  8. rel="stylesheet"
  9. type="text/css"
  10. href="http://unpkg.com/iview/dist/styles/iview.css"
  11. />
  12. <script
  13. type="text/javascript"
  14. src="http://vuejs.org/js/vue.min.js"
  15. ></script>
  16. <script
  17. type="text/javascript"
  18. src="http://unpkg.com/iview/dist/iview.min.js"
  19. ></script>
  20. <style>
  21. .content {
  22. margin: 30px auto;
  23. max-width:1100px;
  24. }
  25. </style>
  26. </head>
  27.  
  28. <body>
  29. <div id="app">
  30. <div class="content">
  31. <Row>
  32. <i-col span=20>
  33. <i-form label-width="80" inline>
  34. <form-item label="本金:" >
  35. <i-input type="text" v-model="ben" @on-blur='calc()'/>
  36. </form-item>
  37. <form-item label="利率:">
  38. <i-input type="text" v-model="lx" @on-blur='calc()'/>
  39. </form-item>
  40. <form-item label="分期数:">
  41. <i-input type="text" v-model="time" @on-blur='calc()'/>
  42. </form-item>
  43. </i-form>
  44. </i-col>
  45. <i-col span=4>
  46. <i-button type="primary" @click="calc()">计算</i-button>
  47. </i-col>
  48. </Row>
  49. <Alert>
  50. <Row style="text-align:center">
  51. <i-col span=6>总还款金额:{{all | zheng}}</i-col>
  52. <i-col span=6>总利息:{{all_lx | zheng}}</i-col>
  53. <i-col span=6>平均每月需还:{{all/time | zheng}}</i-col>
  54. <i-col span=6>平均每月利息:{{all_lx/time | zheng}}</i-col>
  55. </Row>
  56. </Alert>
  57. <i-table :loading="loading" :columns="columns1" :data="data1" size="small" border></i-table>
  58.  
  59. </div>
  60. </div>
  61. <script type="text/javascript">
  62. new Vue({
  63. el: "#app",
  64. data: {
  65. loading: true,
  66. ben:120000,
  67. lx:0.000288,
  68. time: 24,
  69. all:0,
  70. all_lx:0,
  71. columns1:[
  72. {
  73. title: '还款日期',
  74. key: 'day'
  75. },
  76. {
  77. title: '平均每月需还',
  78. key: 'ping'
  79. },
  80. {
  81. title: '平均每月利息',
  82. key: 'ping_lx'
  83. },
  84. {
  85. title: '待还本金',
  86. key: 'ben'
  87. },
  88. {
  89. title: '还款金额',
  90. key: 'er'
  91. },
  92. {
  93. title: '本金',
  94. key: 'jin'
  95. },
  96. {
  97. title: '利息',
  98. key: 'xi'
  99. },
  100. {
  101. title: '当前月份天数',
  102. key: 'num'
  103. },
  104. ],
  105. data1:[
  106. {
  107. day:"",
  108. ping:"",
  109. ping_lx:"",
  110. ben:"",
  111. er:"",
  112. jin:"",
  113. xi:"",
  114. num:"",
  115. }
  116. ],
  117. },
  118. methods: {
  119. calc() {
  120. let self = this;
  121. let lx = this.lx; // 利率
  122. let ben = this.ben; // 本金
  123. let time = this.time; // 分期数
  124. let huan = 0; // 一个月还多少
  125. let yi = 0; // 总利息
  126. let sheng = 0; // 未还本金
  127. let all = 0; // 总金额
  128. let dt = new Date();
  129.  
  130. self.loading = true;
  131. this.data1 = [];
  132.  
  133. for (let i = 0; i < time; i++) {
  134. dt.setMonth(dt.getMonth() + 1);
  135. let y = dt.getFullYear();
  136. let m =
  137. dt.getMonth() + 1 < 10
  138. ? "0" + (dt.getMonth() + 1)
  139. : dt.getMonth() + 1;
  140. let d = dt.getDate()<10 ? "0"+ dt.getDate() : dt.getDate();
  141. // 一期还款金额 = (本金/分期数)+((本金-已经还款金额)*利率)
  142. let mylx = (ben - (ben / time) * i) * lx * 30;
  143. // let mylx = (ben - (ben / time) * i) * lx * new Date(y, m, 0).getDate();
  144. huan = ben / time + mylx;
  145. yi += mylx;
  146. all += huan;
  147. sheng = ben - (ben / time) * i;
  148.  
  149. 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())})
  150.  
  151. }
  152. // 平均每月需还金额
  153. for (let k = 0; k < this.data1.length; k++) {
  154. this.data1[k].ping = parseInt(all/time);
  155. this.data1[k].ping_lx = parseInt(yi/time);
  156. }
  157. this.all = parseInt(all);
  158. this.all_lx = parseInt(yi);
  159. setTimeout(() => {
  160. self.loading = false;
  161. },300);
  162. }
  163. },
  164. created(){
  165. this.calc();
  166. },
  167. filters: {
  168. zheng(data) {
  169. return parseInt(data) || 0;
  170. }
  171. }
  172. });
  173. </script>
  174. </body>
  175. </html>

------------------------------------------------------- 2019-03-19更新-----------------------------------------------------------

今天又看了一下,然后改了2个地方

1. 加入序号,知道什么时候还的是第几期

2. 加入可以选中当前行,对,它就是这个月的讨债仔

代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  6. <title>zhengshize</title>
  7. <link
  8. rel="stylesheet"
  9. type="text/css"
  10. href="http://unpkg.com/iview/dist/styles/iview.css"
  11. />
  12. <script
  13. type="text/javascript"
  14. src="http://vuejs.org/js/vue.min.js"
  15. ></script>
  16. <script
  17. type="text/javascript"
  18. src="http://unpkg.com/iview/dist/iview.min.js"
  19. ></script>
  20. <style>
  21. .content {
  22. margin: 30px auto;
  23. max-width:1100px;
  24. }
  25. </style>
  26. </head>
  27.  
  28. <body>
  29. <div id="app">
  30. <div class="content">
  31. <Row>
  32. <i-col span=20>
  33. <i-form label-width="80" inline>
  34. <form-item label="本金:" >
  35. <i-input type="text" v-model="ben" @on-blur='calc()'/>
  36. </form-item>
  37. <form-item label="利率:">
  38. <i-input type="text" v-model="lx" @on-blur='calc()'/>
  39. </form-item>
  40. <form-item label="分期数:">
  41. <i-input type="text" v-model="time" @on-blur='calc()'/>
  42. </form-item>
  43. </i-form>
  44. </i-col>
  45. <i-col span=4>
  46. <i-button type="primary" @click="calc()">计算</i-button>
  47. </i-col>
  48. </Row>
  49. <Alert>
  50. <Row style="text-align:center">
  51. <i-col span=6>总还款金额:{{all | zheng}}</i-col>
  52. <i-col span=6>总利息:{{all_lx | zheng}}</i-col>
  53. <i-col span=6>平均每月需还:{{all/time | zheng}}</i-col>
  54. <i-col span=6>平均每月利息:{{all_lx/time | zheng}}</i-col>
  55. </Row>
  56. </Alert>
  57. <i-table :loading="loading" :columns="columns1" :data="data1" size="small" border highlight-row></i-table>
  58.  
  59. </div>
  60. </div>
  61. <script type="text/javascript">
  62. new Vue({
  63. el: "#app",
  64. data: {
  65. loading: true,
  66. ben:120000,
  67. lx:0.000288,
  68. time: 24,
  69. all:0,
  70. all_lx:0,
  71. columns1:[
  72. {
  73. type:"index",
  74. width:68,
  75. title:"期数",
  76. align:'center'
  77. },
  78. {
  79. title: '还款日期',
  80. key: 'day'
  81. },
  82. {
  83. title: '平均每月需还',
  84. key: 'ping'
  85. },
  86. {
  87. title: '平均每月利息',
  88. key: 'ping_lx'
  89. },
  90. {
  91. title: '待还本金',
  92. key: 'ben'
  93. },
  94. {
  95. title: '还款金额',
  96. key: 'er'
  97. },
  98. {
  99. title: '本金',
  100. key: 'jin'
  101. },
  102. {
  103. title: '利息',
  104. key: 'xi'
  105. },
  106. {
  107. title: '当前月份天数',
  108. key: 'num'
  109. },
  110. ],
  111. data1:[
  112. {
  113. day:"",
  114. ping:"",
  115. ping_lx:"",
  116. ben:"",
  117. er:"",
  118. jin:"",
  119. xi:"",
  120. num:"",
  121. }
  122. ],
  123. },
  124. methods: {
  125. calc() {
  126. let self = this;
  127. let lx = this.lx; // 利率
  128. let ben = this.ben; // 本金
  129. let time = this.time; // 分期数
  130. let huan = 0; // 一个月还多少
  131. let yi = 0; // 总利息
  132. let sheng = 0; // 未还本金
  133. let all = 0; // 总金额
  134. let dt = new Date();
  135.  
  136. self.loading = true;
  137. this.data1 = [];
  138.  
  139. for (let i = 0; i < time; i++) {
  140. dt.setMonth(dt.getMonth() + 1);
  141. let y = dt.getFullYear();
  142. let m =
  143. dt.getMonth() + 1 < 10
  144. ? "0" + (dt.getMonth() + 1)
  145. : dt.getMonth() + 1;
  146. let d = dt.getDate()<10 ? "0"+ dt.getDate() : dt.getDate();
  147. // 一期还款金额 = (本金/分期数)+((本金-已经还款金额)*利率)
  148. let mylx = (ben - (ben / time) * i) * lx * 30;
  149. // let mylx = (ben - (ben / time) * i) * lx * new Date(y, m, 0).getDate();
  150. huan = ben / time + mylx;
  151. yi += mylx;
  152. all += huan;
  153. sheng = ben - (ben / time) * i;
  154.  
  155. 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())})
  156.  
  157. }
  158. // 平均每月需还金额
  159. for (let k = 0; k < this.data1.length; k++) {
  160. this.data1[k].ping = parseInt(all/time);
  161. this.data1[k].ping_lx = parseInt(yi/time);
  162. }
  163. this.all = parseInt(all);
  164. this.all_lx = parseInt(yi);
  165. setTimeout(() => {
  166. self.loading = false;
  167. },300);
  168. }
  169. },
  170. created(){
  171. this.calc();
  172. },
  173. filters: {
  174. zheng(data) {
  175. return parseInt(data) || 0;
  176. }
  177. }
  178. });
  179. </script>
  180. </body>
  181. </html>

------------------------------------------------------- 2019-04-21更新-----------------------------------------------------------

今天又又看了一下,然后改了1个地方

1. 增加“开始日期”

默认是当前日期,如果想从1号开始算起,就选1号,还款日期也会相应改变:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  6. <title>zhengshize</title>
  7. <link
  8. rel="stylesheet"
  9. type="text/css"
  10. href="http://unpkg.com/iview/dist/styles/iview.css"
  11. />
  12. <script
  13. type="text/javascript"
  14. src="http://vuejs.org/js/vue.min.js"
  15. ></script>
  16. <script
  17. type="text/javascript"
  18. src="http://unpkg.com/iview/dist/iview.min.js"
  19. ></script>
  20. <style>
  21. .content {
  22. margin: 30px auto;
  23. max-width:1000px;
  24. }
  25. .input_width{
  26. width: 120px;
  27. }
  28. </style>
  29. </head>
  30.  
  31. <body>
  32. <div id="app">
  33. <div class="content">
  34. <Row>
  35. <i-col span=21>
  36. <i-form label-width="80" inline>
  37. <form-item label="本金:" >
  38. <i-input type="text" class="input_width" v-model="ben" @on-blur='calc()'/>
  39. </form-item>
  40. <form-item label="利率:">
  41. <i-input type="text" class="input_width" v-model="lx" @on-blur='calc()'/>
  42. </form-item>
  43. <form-item label="分期数:">
  44. <Input-Number type="text" class="input_width" v-model="time" @on-blur='calc()'/>
  45. </form-item>
  46. <form-item label="开始日期:">
  47. <Date-Picker type="date" class="input_width" v-model="day" format="yyyy年MM月dd日" placeholder=""></Date-Picker>
  48. </form-item>
  49. </i-form>
  50. </i-col>
  51. <i-col span=3>
  52. <i-button type="primary" @click="calc()">计算</i-button>
  53. </i-col>
  54. </Row>
  55. <Alert>
  56. <Row style="text-align:center">
  57. <i-col span=6>总还款金额:<strong>{{all | zheng}}</strong></i-col>
  58. <i-col span=6>总利息:<strong>{{all_lx | zheng}}</strong></i-col>
  59. <i-col span=6>平均每月需还:<strong>{{all/time | zheng}}</strong></i-col>
  60. <i-col span=6>平均每月利息:<strong>{{all_lx/time | zheng}}</strong></i-col>
  61. </Row>
  62. </Alert>
  63. <i-table :loading="loading" :columns="columns1" :data="data1" size="small" border highlight-row></i-table>
  64. </div>
  65. </div>
  66. <script type="text/javascript">
  67. new Vue({
  68. el: "#app",
  69. data: {
  70. loading: true,
  71. day: "",
  72. ben:120000,
  73. lx:0.000288,
  74. time: 24,
  75. all:0,
  76. all_lx:0,
  77. columns1:[
  78. {
  79. type:"index",
  80. width:70,
  81. title:"期数",
  82. align:'center'
  83. },
  84. {
  85. title: '还款日期',
  86. width:100,
  87. key: 'day'
  88. },
  89. {
  90. title: '平均每月需还',
  91. key: 'ping'
  92. },
  93. {
  94. title: '平均每月利息',
  95. key: 'ping_lx'
  96. },
  97. {
  98. title: '待还本金',
  99. key: 'ben'
  100. },
  101. {
  102. title: '还款金额',
  103. key: 'er'
  104. },
  105. {
  106. title: '本金',
  107. key: 'jin'
  108. },
  109. {
  110. title: '利息',
  111. key: 'xi'
  112. },
  113. {
  114. title: '当前月份天数',
  115. width:110,
  116. key: 'num'
  117. },
  118. ],
  119. data1:[
  120. {
  121. day: "",
  122. ping:"",
  123. ping_lx:"",
  124. ben:"",
  125. er:"",
  126. jin:"",
  127. xi:"",
  128. num:"",
  129. }
  130. ],
  131. },
  132. methods: {
  133. calc() {
  134. let self = this;
  135. let lx = this.lx; // 利率
  136. let ben = this.ben; // 本金
  137. let time = this.time; // 分期数
  138. let huan = 0; // 一个月还多少
  139. let yi = 0; // 总利息
  140. let sheng = 0; // 未还本金
  141. let all = 0; // 总金额
  142. let dt = this.day || new Date(); // 如果没有选择开始时间,默认当前日期
  143.  
  144. self.loading = true;
  145. this.data1 = [];
  146.  
  147. for (let i = 0; i < time; i++) {
  148. dt.setMonth(dt.getMonth() + 1);
  149. let y = dt.getFullYear();
  150. let m =
  151. dt.getMonth() + 1 < 10
  152. ? "0" + (dt.getMonth() + 1)
  153. : dt.getMonth() + 1;
  154. let d = dt.getDate()<10 ? "0"+ dt.getDate() : dt.getDate();
  155. // 一期还款金额 = (本金/分期数)+((本金-已经还款金额)*利率)
  156. let mylx = (ben - (ben / time) * i) * lx * 30;
  157. // let mylx = (ben - (ben / time) * i) * lx * new Date(y, m, 0).getDate();
  158. huan = ben / time + mylx;
  159. yi += mylx;
  160. all += huan;
  161. sheng = ben - (ben / time) * i;
  162.  
  163. 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())})
  164.  
  165. }
  166. // 平均每月需还金额
  167. for (let k = 0; k < this.data1.length; k++) {
  168. this.data1[k].ping = parseInt(all/time);
  169. this.data1[k].ping_lx = parseInt(yi/time);
  170. }
  171. this.all = parseInt(all);
  172. this.all_lx = parseInt(yi);
  173. setTimeout(() => {
  174. self.loading = false;
  175. },300);
  176. }
  177. },
  178. created(){
  179. this.calc();
  180. // 初始化显示当前日期
  181. this.day = new Date();
  182. },
  183. mounted(){
  184.  
  185. },
  186. filters: {
  187. zheng(data) {
  188. return parseInt(data) || 0;
  189. }
  190. }
  191. });
  192. </script>
  193. </body>
  194. </html>

JS计算十万块钱 分31期 利息万分之五 每个月的还款数的更多相关文章

  1. 大三那年在某宝8块钱买的.NET视频决定了我的职业生涯

    前言 谨以此文献给那些还在大学中迷茫的莘莘学子们! 韩愈在<师说>中提出了作为师者应该做的三件事:传道.授业.解惑. 1.传道:培养学生的道德观 2.授业:传授学生专业技能 3.解惑:解答 ...

  2. 为了讲明白继承和super、this关键字,群主发了20块钱群红包

    摘要:以群主发红包为例,带你深入了解继承和super.this关键字. 本文分享自华为云社区<群主发红包带你深入了解继承和super.this关键字>,作者:共饮一杯无 . 需求 群主发随 ...

  3. JS计算字符串所占字节数

    最近项目有个需求要用js计算一串字符串写入到localStorage里所占的内存,众所周知的,js是使用Unicode编码的.而Unicode的实现有N种,其中用的最多的就是UTF-8和UTF-16. ...

  4. JS实现倒计时(天数,时,分,秒)

    <!DOCTYPE html> <html> <head>   <meta charset="utf-8" >   <titl ...

  5. Vue.js 计算属性是什么

    Vue.js 计算属性是什么 一.总结 一句话总结: 模板 表达式 维护 在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护 ...

  6. ACM_给你100块钱

    给你100块钱 Time Limit: 2000/1000ms (Java/Others) Problem Description: 小光见到昨晚旭能神没拿到一血,又损失了一百块,很同情他.但是为了不 ...

  7. 后台开发 3个题目 array_chunk, 100块钱找零钱(动态规划 dynamic programming), 双向循环链表 llist 删除节点

    1. array_chunk 实现 http://php.net/manual/en/function.array-chunk.php <?php function my_array_chunk ...

  8. js计算2个日期相差的天数,两个日期相差的天数,日期相隔天数

    js计算2个日期相差的天数,两个日期相差的天数,日期相隔天数 >>>>>>>>>>>>>>>>>& ...

  9. 自己做站点(二) 20块钱搞定一个企业站:域名&amp;空间申请

    域名注冊的话,推荐大家用新网,由于申请费用确实非常低,但续费的价格还是比較高的,所以不妨多申请几年.打开站点: http://www.xinnet.com/ 注冊一个帐号,然后申请域名,你能够看到,费 ...

随机推荐

  1. JavaScript执行环境和作用域(链)的那些事

    执行环境 什么是执行环境 提起作用域,我们不得不说说什么是执行环境.执行环境定义了变量或函数有权访问的其他数据,并决定其各自的行为.每一个执行环境都有一个对应的变量对象,这个对象的作用就是保存在环境中 ...

  2. 持续集成篇:jenkins搭建和job运行

    好久没有更博了,最近都在忙着其他事情,年底前加上这章再更5篇,10月份开始因为公司业务,要接触appium啦,之后应该也会有所分享. Jenkins所需环境  硬件需求: ①至少需要有256M内存,推 ...

  3. 豆瓣电影信息爬取(json)

    豆瓣电影信息爬取(json) # a = "hello world" # 字符串数据类型# b = {"name":"python"} # ...

  4. order by中用子查询排序

    今天有个需求是对一个列表排序,但是排序字段是在另一个表中,不想用关联查询,就想能否直接在order by中用子查询,后来找到一个还挺好使.记录如下. 排序语句如下: select * from mai ...

  5. Access network

    1       State transfering A•Mobility:开机-搜寻PLMN/CELL来发现自己在网络中的位置•Attach request•Auth request•Auth res ...

  6. 如何给oneindex网盘增加评论、密码查看、read me,头提示功能。

    来自我的博客:www.resource143.com 微信公众号:资源库resource 视频教程地址 点击查看 评论功能 特性 使用 GitHub 登录 支持多语言 [en, zh-CN, zh-T ...

  7. c# 抽象类 抽象方法

    抽象类与非抽象类的主要区别: ·抽象类不能直接被实例化 ·抽象类中可以包含抽象成员,但非抽象类中不可以 ·抽象类不能被密封 声明抽象方法时需注意:·抽象方法必须声明在抽象类中 ·声明抽象方法时,不能使 ...

  8. Mac 10.12安装hosts快速切换工SwitchHosts!

    说明:支持在线本地. 下载: (链接: https://pan.baidu.com/s/1boDw67d 密码: uy6g)

  9. 基于MVC4+EF5.0+Ajax+Json+CSS3的简单注册页面(get&post)

    使用mvc4可以很快速的创建页面,但封装的过多,难免会有些性能上的问题.所以基于此,通过使用简单的手写html,加ajax,json来创建一个注册页面,会比较干净,简洁. 本项目的环境是MVC4+EF ...

  10. (转)错误"因为数据库正在使用,所以无法获得对数据库的独占访问权"的解决方案

    引发原因:是因为我在还原数据库的时候,还有其他的用户正在使用数据库,所以就会出现以上提示. 解决方法:1,设置数据库在单用户模式下工作.设置方法:在需要还原的数据库上右击,在右键菜单命令上选择&quo ...