效果图如下:

代码:

<html>

<head>

<meta charset="GBK"/>

<title>计算利息工具</title>

<style>

#loantable tr{

height:35px;

width:180px;

}

#loantable td{

height:35px;

width:180px;

}

#loantable th{

height:35px;

width:180px;

}

#loantable2 {border-collapse:collapse;}

#loantable2 tr{

height:35px;

width:100%;

}

#loantable2 td{

height:35px;

width:120px;

border:1px solid #000;

text-align:center;

}

#loantable2 th{

height:35px;

width:120px;

border:1px solid #000;

text-align:center;

}

.sss{

width:180px;

height:30px;

}

</style>

<script type="text/JavaScript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script type="text/JavaScript">

function autoSubmit(){

var loanamt=$("#loanamt").val();

var loanrate=$("#loanrate").val();

var loantm=$("#loantm").val();

var danwei=$("#danwei").val();

var repaytype=$("#repaytype").val();

if(loanamt==""){

alert("请输入借款金额");

return;

}

if(loanrate==""){

alert("请输入年化利率");

return;

}

if(loantm==""){

alert("请输入借款时间");

return;

}

if(repaytype==""){

alert("请输入还款方式");

return;

}

var loanamt1=loanamt;

$("#loanamt1").val(loanamt1);

var loanrate1=loanrate;

var repayfee=0.00;

loanrate1=(loanrate/12).toFixed(2);

if(danwei=='1'){//年

repayfee=(loanamt*loanrate*loantm/100).toFixed(2);

}else if(danwei=='3'){//日

repayfee=(loanamt*loanrate*loantm/360/100).toFixed(2);

}else{//月

repayfee=(loanamt*loanrate*loantm/12/100).toFixed(2);

}

$("#loanrate1").val(loanrate1);

$("#repayfee").val(repayfee);

var repayamt=(parseFloat(loanamt1)+parseFloat(repayfee)).toFixed(2);//应还总金额

$("#repayamt").val(repayamt);

var qihao=1;

if(repaytype =="3"){//一次性还款

qihao=1;

}else{

if(danwei =="1"){//年

qihao=loantm*12;

}else if(danwei =="3"){//日

qihao=Math.ceil(loantm/30);

}else{

qihao=loantm;

}

}

$("#qihao").html(qihao);

var params = [];

if(repaytype =="3"){//一次性还款

var benxi=repayamt;

var benjin=parseFloat(loanamt1).toFixed(2);

var lixi=parseFloat(repayfee).toFixed(2);

var lastamt=parseFloat(repayamt).toFixed(2);

params.push({"benxi":benxi,"benjin":benjin,"lixi":lixi,"lastamt":lastamt});

}else if(repaytype =="1"){//等额本息

var benxi=(repayamt/qihao).toFixed(2);

var benjin=(loanamt1/qihao).toFixed(2);

var yihuan=0;//已还

var rlixi=0;//已还总利息

var rbenjin=0;//已还总本金

for(var i=1;i<=parseInt(qihao);i++){

if(parseInt(qihao)==1){

var benxi=parseFloat(benxi).toFixed(2);

var benjin=parseFloat(loanamt1).toFixed(2);

var lixi=(parseFloat(benxi)-parseFloat(benjin)).toFixed(2);

var lastamt=parseFloat(benxi).toFixed(2);

params.push({"benxi":benxi,"benjin":benjin,"lixi":lixi,"lastamt":lastamt});

}else{

if(i==parseInt(qihao)){

var benjin=parseFloat(loanamt1-rbenjin).toFixed(2);

var lixi=parseFloat(repayfee-rlixi).toFixed(2);

var benxi=(parseFloat(benjin)+parseFloat(lixi)).toFixed(2);

var lastamt=(parseFloat(repayamt)-parseFloat(yihuan)).toFixed(2);

params.push({"benxi":benxi,"benjin":benjin,"lixi":lixi,"lastamt":lastamt});

}else{

var benxi=parseFloat(benxi).toFixed(2);

var benjin=parseFloat(benjin).toFixed(2);

var lixi=parseFloat(benxi-benjin).toFixed(2);

var lastamt=(parseFloat(repayamt)-parseFloat(yihuan)).toFixed(2);

yihuan=parseFloat(yihuan)+parseFloat(benxi);

rlixi=parseFloat(lixi)+parseFloat(rlixi);

rbenjin=parseFloat(rbenjin)+parseFloat(benjin);

params.push({"benxi":benxi,"benjin":benjin,"lixi":lixi,"lastamt":lastamt});

}

}

}

}else{//每月还息,到期还本

var benxi=(repayfee/qihao).toFixed(2);

var benjin=0;

var yihuan=0;//已还

var rlixi=0;//已还总利息

for(var i=1;i<=parseInt(qihao);i++){

if(parseInt(qihao)==1){

var benxi=parseFloat(repayamt).toFixed(2);

var benjin=parseFloat(loanamt1).toFixed(2);

var lixi=parseFloat(benxi-benjin).toFixed(2);

var lastamt=parseFloat(benxi).toFixed(2);

params.push({"benxi":benxi,"benjin":benjin,"lixi":lixi,"lastamt":lastamt});

}else{

if(i==parseInt(qihao)){

var benjin=parseFloat(loanamt1).toFixed(2);

var lixi=(parseFloat(repayfee)-parseFloat(rlixi)).toFixed(2);

var benxi=(parseFloat(benjin)+parseFloat(lixi)).toFixed(2);

var lastamt=(parseFloat(repayamt)-parseFloat(yihuan)).toFixed(2);

params.push({"benxi":benxi,"benjin":benjin,"lixi":lixi,"lastamt":lastamt});

}else{

var benxi=parseFloat(benxi).toFixed(2);

var benjin=parseFloat(benjin).toFixed(2);

var lixi=parseFloat(benxi-benjin).toFixed(2);

var lastamt=(parseFloat(repayamt)-parseFloat(yihuan)).toFixed(2);

yihuan=parseFloat(yihuan)+parseFloat(benxi);

rlixi=parseFloat(lixi)+parseFloat(rlixi);

params.push({"benxi":benxi,"benjin":benjin,"lixi":lixi,"lastamt":lastamt});

}

}

}

}

$("#sdata").empty();

var tbody="";

for(var j = 0;j<params.length;j++){

tbody=tbody+"<tr><td>"+(j+1)+"</td><td>"+params[j].benxi+"</td><td>"+params[j].benjin+"</td><td>"+params[j].lixi+"</td><td>"+params[j].lastamt+"</tr>";

}

$("#sdata").append(tbody);

}

</script>

</head>

<body style="margin:0 auto;">

<div style="margin:0 auto; width:100%">

<div style="margin-top:20px;float:left;">

<table id="loantable">

<tr align="right">

<td>

借款金额:

</td>

<td>

<input id="loanamt" value="" class="sss"/>

</td>

</tr>

<tr align="right">

<td>

约定年化(%):

</td>

<td>

<input id="loanrate" value="" class="sss"/>

</td>

</tr>

<tr align="right">

<td>

借款时间:

</td>

<td>

<input id="loantm" value="" style="height:30px;width:133px;"/> <select id="danwei" style="height:30px;"><option value="1">年</option><option value="2">月</option><option value="3">日</option></select>

</td>

</tr>

<tr align="right">

<td>

还款方式:

</td>

<td>

<select id="repaytype" class="sss"><option value="1">按月还款、等额本息</option><option value="2">每月付息,到期还本</option><option value="3">一次还款</option></select>

</td>

</tr>

<tr>

<td>

</td>

<td>

<input type="button" class="sss" style="margin-left:30px;" οnclick="autoSubmit();" value="计算">

</td>

</tr>

</table>

</div>

<div style="margin-top:25px;">

<table id="loantable">

<tr align="right">

<td>

计算结果:

</td>

</tr>

<tr align="right">

<td>

借款总额:

</td>

<td>

<input id="loanamt1" value="" class="sss"/>

</td>

</tr>

<tr align="right">

<td>

月利率(%):

</td>

<td>

<input id="loanrate1" value="" class="sss"/>

</td>

</tr>

<tr align="right">

<td>

应还利息:

</td>

<td>

<input id="repayfee" value="" class="sss"/>

</td>

</tr>

<tr align="right">

<td>

应还本息总额:

</td>

<td>

<input id="repayamt" value="" class="sss"/>

</td>

</tr>

</table>

</div>

<div style="width:100%;margin-top:20px;margin-left:60px;background-color:#fff">

还款计划:总期数:<span id="qihao"></span>

<table id="loantable2">

<th>期号</th>

<th>月还本息</th>

<th>月还本金</th>

<th>月还利息</th>

<th>本息余额</th>

<tbody id="sdata"></tbody>

</table>

</div>

</div>

</body>

</html>

写了一个计算利息和还款计划的html小工具相关推荐

  1. 自己写的一个LOL云顶智之奕小工具

    自己写的一个LOL云顶智之奕小工具 注:由于此软件后期没有再维护,所以已经放弃开源了,软件已经不支持最近的英雄联盟版本了.为此我感到抱歉. 先看截图: 首先是一个悬浮窗口,可以任意拖动,右键点击黑色部 ...

  2. 写了一个新浪微博自动加粉的挂机小工具

    写这个东西其实是为了自己方便,运行最小化到托盘就行. 内核是新浪微博的互粉大厅.原理是因为互粉大厅只要在线就会进行自动互粉,无需手工操作. 编程:VB编程. 软件大小:100K左右 其实,如果把浏览器 ...

  3. 已知计算组合的公式如下,用递归算法写出一个计算组合Cmn的值的函数zh(m,n),并写出主函数调用该函数。

    /* 已知计算组合数的公式如下,用递归算法写出一个计算组合Cmn的值的函数zh(m,n),并写出主函数调用该函数. 输入 两个整数 m,n(m>=n)输出 组合值样例输入 4 2 样例输出 6 ...

  4. 深夜脑洞,写了一个可以推算火车票身份证号码的小程序

    深夜脑洞,写了一个可以推算火车票身份证号码的小程序 1. 火车票上*号打的是月,日,理论上的有最大366种组合: 2. 校验码是最后的一位,0-9及X,11个结果: 3. 那么,通过火车票上的身份证号 ...

  5. mysql model first,一个支持 CodeFirst/DbFirst/ModelFirst 的数据库小工具

    一个支持 CodeFirst/DbFirst/ModelFirst 的数据库小工具 Intro DbTool 是一个支持 CodeFirst/DbFirst/ModelFirst 的数据库小工具,原本 ...

  6. 一个支持 CodeFirst/DbFirst/ModelFirst 的数据库小工具

    一个支持 CodeFirst/DbFirst/ModelFirst 的数据库小工具 Intro DbTool 是一个支持 CodeFirst/DbFirst/ModelFirst 的数据库小工具,原本 ...

  7. Python-两个列表取交集、并集、差集(编写了一个两个文件取交集的小工具)

    最近突然有个需求(取两个文件数据的交集),数据量非常大(2000多万行的数据),最开始的思路是先取一个文件所有的数据,保存成一个列表,然后判断是否在另一个文件中,花了十几分钟写出来后,一运行,差点崩溃 ...

  8. 发一个自动刷网站PV流量的小工具

    刷IP需要很多资源或财力,而刷PV却非常easy,一直要有一个能上网的机器,就能刷出N个PV值来.因为需要,写了个刷PV的小工具,可以设置要刷的页面,设置时间间隔. 下载 转载于:https://ww ...

  9. 一个通过捕获ARP发现IP的小工具

    0 由来 公司接入层交换机划分了很多Vlan,每个Vlan对应一个IP子网,各个房间所属Vlan号非常混乱.有时候,电脑IP丢失或新配电脑时,不能知道到底该配置那个IP网段.解决办法就是,登录交换机, ...

最新文章

  1. 【消息中间件】Spring整合RabbitMQ
  2. 【Linux指标】内存篇
  3. Vivo手机调试 logcat 信息一堆星号问题
  4. 【模型开发】构建风控评分卡模型介绍(WOE/KS/ROC)
  5. rust建的怎么拆除_农民为什么建简易房?
  6. C - Line-line Intersection Gym - 102220C(线段相交)
  7. mysql启动触发器_MYSQL中禁用/启动触发器
  8. 中誉集团:出售3218万股恒大汽车股份 套现1.25亿港元
  9. 【转】如何在windows平台开发OpenGL程序使用OpenGL1.2或更高版本
  10. 拓端tecdat|Python中利用长短期记忆模型LSTM进行时间序列预测分析 - 预测电力负荷数据
  11. 在手机/平板上安装kali系统
  12. 国产操作系统--NeoKylin基本操作命令汇总(一)
  13. VISTA 服务详解
  14. 28、制作畅销书排行榜页面
  15. jieba分词(1):入门案例
  16. airpak模拟案例,Airpak模拟教程-体育馆通风模拟案例-CFD数值模拟教程airpak
  17. Latex 插入列举条目、编号item及间隔调整
  18. 硬件篇——阻容一阶滤波电路
  19. 抖音企业号源码部署搭建
  20. 详解活动图计算关键路径、最早开始时间、最晚开始时间、冗余时间,C++ 程序实现

热门文章

  1. 设置字段默认值Java_小书MybatisPlus第9篇-常用字段默认值自动填充
  2. 人工智能技术发展概述
  3. AIS(自动识别系统)介绍
  4. 算法提升(一)二分法
  5. 【游戏设计模式】之 《游戏编程模式》全书内容提炼总结
  6. python基础学习(三)之线性数据结构
  7. Qt源码分析--QImage(1)
  8. 一文了解各大图数据库查询语言(Gremlin vs Cypher vs nGQL)| 操作入门篇
  9. 完整且详细的单链表代码
  10. linux使用sts4,视听说sts4-4