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

于 2022-08-05 15:15:54 发布
阅读量503 收藏 1
点赞数 1
分类专栏： html 文章标签： html javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lige12/article/details/126178281
版权

效果图如下：

 代码：

<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>

君宁乐
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用html+js实现的等额本息贷款月供计算器
04-08
用html+js实现的等额本息贷款月供计算器 用html+js实现的等额本息贷款月供计算器 用html+js实现的等额本息贷款月供计算器
存款利息计算器html代码,存款收益计算器.html
weixin_30647423的博客
06-09 472
// 创建标签var div=document.createElement('div');document.body.appendChild(div);var div=document.querySelector('div');div.style.width='500px';div.style.height='600px';div.style.border='1px solid orange';d...
HTML表格：日常消费账单表格展示网页
qq_45823118的博客
03-15 5356
HTML表格：日常消费账单表格展示网页任务描述相关知识最基本的表格带边框的表格带表头的表格scope属性结构更清晰的表格单元格跨越多行多列的表格编程要求测试说明 任务描述 本关任务是编写一个日常消费账单表格展示网页，你将通过本关学习如何使用HTML编写出简洁清晰的表格。 本关网页显示效果如下图所示： 相关知识 在日常生活中财务报表、日历等，都常使用表格展示。通常，表格数据都由行和列组成。 最基本的表格 在HTML表中，一个表格(table)由行(tr)组成，每一行由单元格组成，单元格有标题单元格(th)和
房贷计算器html代码,html房贷计算器输出两个框怎么弄
weixin_33610780的博客
06-26 433
2016-04-23 01:34龚小艳 客户经理欢迎看一下我的计算器，有程序界面，你可以参考一下，添加运算功能。说明：1.共有4个文本框其，其中三个是填入或输出数据的(名称分别是：txta txtb txtc)，剩下的那个是符号(txtd)2.共7个按钮，4个是符号按钮，一个计算，一个清零．这是我弄的程序”袖珍计算器”代码也是自己编写的，代码如下：通用声明Dim j As Integer '定义j...
利息计算器 html,html+jQuery简单的利息计算器
weixin_30092093的博客
06-07 335
计算利息的公式：利息=本金*利率/计息*(到期日期-起息日期)但是每次都要自己算很麻烦，不如开发个小东西，直接输入就可以得出利息，用了一点时间做好了，虽然简单，还是想奉献给大家~--index.html--利息计算$(document).ready(function(){$("#btn").click(function(){var benjin=$("#benjin").val();var lil...
贷款计算器：一个简单的贷款计算器。 基本HTML。 CSS和JS
02-09
贷款计算器是一种在线工具，用于帮助用户估算贷款的还款金额、利息和还款期限。在这个项目中，我们有一个基于基本HTML、CSS和JavaScript实现的简单贷款计算器。以下是对这些关键技术和相关知识点的详细介绍： **...
纯静态html计算房贷计算器
04-26
总的来说，纯静态HTML计算房贷计算器通过结合HTML、CSS和JavaScript（jQuery），提供了一个直观、便捷的工具，帮助用户快速了解房贷的还款计划。这样的计算器对于购房者来说非常实用，能够让他们在申请贷款前对未来...
H5 房贷计算器与税费计算
05-07
【H5房贷计算器与税费计算】是用于帮助用户快速计算购房时所需支付的贷款利息、首付金额以及相关税费的一款在线工具。它集成了商业贷款、公积金贷款和组合贷款三种常见贷款方式，使得购房者能够根据自身情况，灵活...
房贷还款计算器.zip
04-06
房贷还款计算器是一款用于计算个人或企业偿还房屋贷款的工具，其核心功能是根据用户输入的贷款金额、贷款期限、年利率等关键参数，预测出每月的还款额以及在整个贷款周期内的总利息支出。这款计算器通常以HTML页面的...
nettocalc:在奥地利计算贷款的工具。 用于主题 WIR (Wirtschaft und Recht)
05-30
这个工具可以帮助用户理解和计算在奥地利进行贷款时的各种财务参数，如月还款额、总利息、贷款期限等，是学校项目的一部分，也可能是教师和学生在探讨金融和法律议题时的实用资源。 该工具基于HTML构建，这意味着它...
html+css+js 贷款计算器
10-21
简单实用
还款计划生成系统
03-16
一款用于还款计划自动生成，贷款记录建立及查询的免费软件。主要功能可分为新建还款任务、历史记录搜索、到期合同查询. 通过新建还款任务可以增加新的客户资料及贷款记录，并可以生成还款计划表（excel文件). 通过历史记录搜索您可以根据客户姓名或合同代码查询以往记录，还可以修改客户还款记录. 利用到期合同查询功能您可以查询指定日期以前所有未付清贷款记录，并可以查看客户详细资料及修改合同还款记录.
存款利息计算器html代码,html+jQuery简单的利息计算器
weixin_32367041的博客
06-09 607
计算利息的公式：利息=本金*利率/计息*(到期日期-起息日期)但是每次都要自己算很麻烦，不如开发个小东西，直接输入就可以得出利息，用了一点时间做好了，虽然简单，还是想奉献给大家~--index.html--利息计算$(document).ready(function(){$("#btn").click(function(){var benjin=$("#benjin").val();var lil...
[JavaScript学习记录] 首次运用于网页,做一个简易利息计算器!!!
☆迷茫Dog的秘密基地☆
08-11 615
事件 javascript允许html与用户交互的行为 例如:鼠标点击事件 <script> function sayHello{ alert('Hello World ppp!'); } </script> <button onclick="sayHello()">kick me</button> 错误处理 <script> function f1(){ //函数f1是存在的 } try{ document...
QTP的Web ReplayType 设置
qq_30507163的博客
06-12 246
什么是ReplayType：ReplayType is QTP Web Add-in setting. It can be used to change how the events are replayed on the browser. There are two modes of ReplayTypeEvents (1) - Replay of events using the Browse...
html 输入金额,解决input只能输入金额类型的方案（金额输入框只能输入2位小数）...
weixin_42347634的博客
06-04 1474
欢迎加我技术交流QQ群 ：811956471前言：最近在用uni-app框架，写一个项目(支付宝和微信小程序)遇到一个需求，要求金额输入框只能输入2位小数，且第一位数不能是 "."，只能是数字。发现用 @input事件监听input v-model绑定输入的值，在用正则去校验，可以解决这个问题，但是不完美的是，当达到小数点第二位之后，再次输入光标会不停的闪烁，体验感很差，又不想用第三方插件，也...
JavaScript - 贷款计算器
王佳斌
06-20 4552
前言 在JavaScript权威指南一书中，有贷款计算器一例。 书中有很多低级错误(我应该是盗版…)，经过一些修改，它成功完成了贷款计算，我把源码放到这里，记录一下。 HTML代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Javascript Loan Cal...
写一个可以计算等额本息每个月利息的计算代码
最新发布
03-30
以下是一个简单的Python代码示例，用于计算等额本息贷款的每月利息： ...然后，它使用等额本息贷款公式计算每月还款额，并在循环中计算每月的利息和本金。最后，代码输出每月的本金和利息，并计算贷款总利息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值