JavaScript实现贷款利息计算器

最新推荐文章于 2023-12-05 15:44:32 发布
最新推荐文章于 2023-12-05 15:44:32 发布
阅读量2.1k 收藏 4
点赞数 1
分类专栏： JavaScript 文章标签： JavaScript 利息计算 贷款利息 等额本息 先息后本
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xfx_1994/article/details/90443555
版权

JavaScript实现贷款利息计算器


为了简洁明了，就省去样式了，只留计算和赋值显示的部分~
需要自行引入jQuery

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>理财计算器</title>
<meta name="keywords" content="理财计算器">
<script type="text/javascript" src="../jquery2.1.min.js"></script>
</head>
<body>
<!--计算器开始-->
<div>
	<div>
    	<div class="jsq_top">
        	<div>出借利息计算器</div>
        	<div>
            	<div>
                	<aa>出借金额</aa><input type="text" id="total"><span></span><font></font>
                </div>
                <div>
                	<aa>出借利率</aa><input type="text" id="yearRate" errormsg="" placeholder="%">
                </div>
                <div>
                	<aa>借款期限</aa>
 					<select name="select" id="sumTerm">
						<%
							for(int i=1;i<=36;i++){
						%>
								<option value="<%=i %>"><%=i %>个月</option>
						<%} %>
                  	 </select>
                </div>
                <div>
                	<aa>还款方式</aa>
                    <select name="select" id="hkfs" >
						<option value="MYFX" >先息后本</option>
						<option value="DEBX" >等额本息</option>
						<option value="DEBJ" >等额本金</option>
						<option value="YCFQ" >一次付清</option>
                    </select>
                </div>
                <div>
                    <button class="jsqks">开始计算</button>
                </div>
            </div>
            <div id="showjs1" style="display:none;">
            	<div><h4>收益描述</h4></div>
                <div class="jsq_xq">
                	<div>
                    	<span>出借金额</span><font id="mtoal"></font>
                    </div>
                    <div>
                    	<span>应收利息</span><font id="ghbx"></font>
                    </div>
                    <div>
                    	<span>收回全部本息时间</span><font id="mthns"></font>
                    </div>
                    <div class="clr"></div>
                </div>
            </div>
            <div id="showjs2" style="display:none;">
            	<div><h4>本息回收时间表</h4></div>
                <div>
                	<table border="0" cellpadding="0" cellspacing="0" class="jstr">
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!--计算器结束-->
 <script type="text/javascript">
Number.prototype.toFixed = function(d)
	  {
	      var s=this+"";if(!d)d=0;
	      if(s.indexOf(".")==-1)s+=".";s+=new Array(d+1).join("0");
	      if (new RegExp("^(-|\\+)?(\\d+(\\.\\d{0,"+ (d+1) +"})?)\\d*$").test(s))
	      {
	          var s="0"+ RegExp.$2, pm=RegExp.$1, a=RegExp.$3.length, b=true;
	          if (a==d+2){a=s.match(/\d/g); if (parseInt(a[a.length-1])>4)
	          {
	              for(var i=a.length-2; i>=0; i--) {a[i] = parseInt(a[i])+1;
	              if(a[i]==10){a[i]=0; b=i!=1;} else break;}
	          }
	          s=a.join("").replace(new RegExp("(\\d+)(\\d{"+d+"})\\d$"),"$1.$2");
	      }if(b)s=s.substr(1);return (pm+s).replace(/\.$/, "");} return this+"";
	};
	
	
	//不失精度计算 加、减、乘、除
	function accAdd(arg1,arg2){
		var r1,r2,m;
		try{r1=arg1.toString().split(".")[1].length;}catch(e){r1=0;}
		try{r2=arg2.toString().split(".")[1].length;}catch(e){r2=0;}
		m=Math.pow(10,Math.max(r1,r2));
		return (arg1*m+arg2*m)/m;
	}
	
	function Subtr(arg1,arg2){
		var r1,r2,m,n;
		try{r1=arg1.toString().split(".")[1].length;}catch(e){r1=0;}
		try{r2=arg2.toString().split(".")[1].length;}catch(e){r2=0;}
		m=Math.pow(10,Math.max(r1,r2));
	     //last modify by deeka
		 //动态控制精度长度
		n=(r1>=r2)?r1:r2;
		return ((arg1*m-arg2*m)/m).toFixed(n);
	}
	
	function accMul(arg1,arg2)
	{
		var m=0,s1=arg1.toString(),s2=arg2.toString();
		try{m+=s1.split(".")[1].length;}catch(e){}
		try{m+=s2.split(".")[1].length;}catch(e){}
		return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m);
	}
		
	function accDiv(arg1,arg2){
		var t1=0,t2=0,r1,r2;
		try{t1=arg1.toString().split(".")[1].length;}catch(e){}
		try{t2=arg2.toString().split(".")[1].length;}catch(e){}
		with(Math){
		r1=Number(arg1.toString().replace(".",""));
		r2=Number(arg2.toString().replace(".",""));
		return (r1/r2)*pow(10,t2-t1);
		}
	}
	
	Number.prototype.add = function (arg){
		return accAdd(arg,this);
	};
	
	Number.prototype.substr = function (arg){
		return Subtr(this, arg);
	};
	
	Number.prototype.mul = function (arg){
		return accMul(arg, this);
	};
	
	Number.prototype.div = function (arg){
		return accDiv(this, arg);
	};
	

	
	
			$("#total").on('keyup', function (event) {
			    var $amountInput = $(this);
			    //响应鼠标事件，允许左右方向键移动 
			    event = window.event || event;
			    if (event.keyCode == 37 | event.keyCode == 39) {
			        return;
			    }
			    //先把非数字的都替换掉，除了数字和. 
			    $amountInput.val($amountInput.val().replace(/[^\d.]/g, "").
			        //只允许一个小数点              
			        replace(/^\./g, "").replace(/\.{2,}/g, ".").
			        //只能输入小数点后两位
			        replace(".", "$#$").replace(/\./g, "").replace("$#$", ".").replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'));
			            });
			$("#total").on('blur', function () {
			    var $amountInput = $(this);
			    //最后一位是小数点的话，移除
			    $amountInput.val(($amountInput.val().replace(/\.$/g, "")));
			});
	
		$(".jsqks").click( function() {
				//借款金额
				var toal = $("#total").val();
			  	//借款期限
			  	var month = $("#sumTerm").val();
			  	//借款年利率
			  	var year = $("#yearRate").val();
			  	//还款方式
			  	var type = $("#hkfs").val();
			  	//月利率
			  	var monthRate = parseFloat(year)/12;
				if(toal <= 0){
					alert("请输入投资金额");
			  		return false;
				}
				if(month <=0){
					alert("请输入投资期限");
			  		return false;
			  	}
			  	if(year <=0){
					alert("请输入年利率");
			  		return false;
			  	}
				
				var myreg1 = /^[0-9]([0-9])*$/;       //只能输入整数
 				var myreg2 = /^(([1-9]+)|([0-9]+\.[0-9]{1}))$/;		//只能输入小数点后有一位的数字
 				var myreg3 = /^(([1-9]+)|([0-9]+\.[0-9]{1,2}))$/;   //只能输入小数点后有两位的数字
				var yeareg=/^\d+(\d|(\.[1-9]{1}))$/;
				if(!myreg1.test(toal) && !myreg2.test(toal) && !myreg3.test(toal)){
					return;
				}
				if(!yeareg.test(year) && !myreg1.test(year)){
					return;
				}
				
				$("#showjs1").show();
				$("#showjs2").show();
				if(type == "DEBX"){
						monthRate = monthRate/100;
					   	//月还本息
					  	//每月还款额=[总本金×月利率×(1+月利率)^还款月数]÷[(1+月利率)^总期数-1]
					  	//power（1+x,n）*x*y/ (power（1+x,n）-1)
					   	var yhbx = ((Math.pow(1+monthRate, month)*monthRate*toal)/(Math.pow(1+monthRate, month)-1)).toFixed(2);
					   	$("#mthns").html(month+'月');
					   	$("#mtoal").html(toal+'元');
						   
						//应收利息
						 var yslxh = 0; 
						 $(".jstr").html("");
					 	 var content='<tr>';
						 content+='<th>期次</th>';
						 content+='<th>偿还本息(元)</th>';
						 content+='<th>偿还利息(元)</th>';
						 content+='<th>偿还本金(元)</th>';
		 				 content+='<th>剩余本金(元)</th>';
						 content+='</tr>';
							 
						//已还本金之和	 
						 var totalYhbj = 0;
						 var dsbj = 0;
						 var yhbj = 0;
						 var  interest_cur = 0;
						 var zhdhbj = toal;
						 for(var i=1;i<=month;i++){
							 //应还利息
							  	interest_cur = parseFloat(Subtr(toal,totalYhbj)*monthRate).toFixed(2);
							  	//应还本金
							  	yhbj = parseFloat(Subtr(yhbx, interest_cur)).toFixed(2);
							    
							  	 totalYhbj =accAdd(totalYhbj, yhbj);
							  	//待收本金
							    dsbj  = parseFloat(Subtr(toal, totalYhbj)).toFixed(2);
							    
							    if(i == (month-1)){
							    	zhdhbj =  dsbj;
							    }
							    if(i == month){
							    	yhbj = zhdhbj;
							    	 //应还利息
								  	interest_cur = parseFloat(Subtr(yhbx, yhbj)).toFixed(2);
								  	totalYhbj =accAdd(totalYhbj, yhbj);
								  	dsbj  = 0;
							    }
							  	 
							  	content+='<tr>';
							  	content+='<td>'+i+'</td>';
								content+='<td id="ysbx'+i+'">'+yhbx+'</td>';
								content+='<td id="yslx'+i+'">'+interest_cur+'</td>';
								content+='<td id="ysbj'+i+'">'+yhbj+'</td>';
				 			    content+='<td id="dsbj'+i+'">'+dsbj+'</td>';
								content+='</tr>';
								yslxh=accAdd(yslxh, interest_cur);
						 }
						 $("#ghbx").html(yslxh.toFixed(2)+'元');
						 $(".jstr").append(content);
				 }else if(type == "DEBJ"){
						//月利息
					   $("#mthns").html(month+'月');
					   $("#mtoal").html(toal+'元');
					   
					   
						 $(".jstr").html("");
						 var content='<tr>';
						 content+='<th>期次</th>';
						 content+='<th>偿还本息(元)</th>';
						 content+='<th>偿还利息(元)</th>';
						 content+='<th>偿还本金(元)</th>';
		 				 content+='<th>剩余本金(元)</th>';
						 content+='</tr>';
							 
						 var new_ysbx = 0;
						 var new_ysbj = 0;
						 var new_yslx = 0;
						 var new_sybj = 0;
						 var yslxTotle = 0;
						 var ysbjTotle = 0;
//						 new_ysbj = parseInt(toal).div(month);
						 new_ysbj = toal/month;
						 for(var i=1;i<=month;i++){
							 new_yslx = (toal - ysbjTotle)*(monthRate/100);
							 ysbjTotle = ysbjTotle + new_ysbj;
							 new_ysbx = new_yslx + new_ysbj;
							 new_sybj = toal - new_ysbj*i;
						  	content+='<tr>';
						  	content+='<td>'+i+'</td>';
							content+='<td id="ysbx'+i+'">'+new_ysbx.toFixed(2)+'</td>';
							content+='<td id="yslx'+i+'">'+new_yslx.toFixed(2)+'</td>';
							content+='<td id="ysbj'+i+'">'+new_ysbj.toFixed(2)+'</td>';
			 			    content+='<td id="dsbj'+i+'">'+new_sybj.toFixed(2)+'</td>';
							content+='</tr>';
							
							yslxTotle = accAdd(yslxTotle,new_yslx);
							
						 }
						 $("#ghbx").html(yslxTotle.toFixed(2)+'元');
						 $(".jstr").append(content);
						 
				 }else if(type == "YCFQ"){
					  //还利息
					   var yslx = (monthRate * toal * month)/100;
					   $("#mthns").html(month+'月');
					   $("#mtoal").html(toal+'元');
					   $("#ghbx").html(yslx.toFixed(2)+'元');
					   
					 $(".jstr").html("");
					 var content='<tr>';
					 content+='<th>期次</th>';
					 content+='<th>偿还本息(元)</th>';
					 content+='<th>偿还利息(元)</th>';
					 content+='<th>偿还本金(元)</th>';
	 				 content+='<th>剩余本金(元)</th>';
					 content+='</tr>';
						 
					 for(var i=1;i<=month;i++){
						 var new_ysbx = 0;
						 var new_ysbj = 0;
						 var new_yslx = 0;
						 var new_sybj = parseFloat(toal);
						 if(i == month){
							 new_yslx = yslx;
							 new_ysbj = parseFloat(toal);
							 new_ysbx = accAdd(new_yslx,new_ysbj);
							 new_sybj = 0;
						 }
						 
					  	 
					  	content+='<tr>';
					  	content+='<td>'+i+'</td>';
						content+='<td id="ysbx'+i+'">'+new_ysbx.toFixed(2)+'</td>';
						content+='<td id="yslx'+i+'">'+new_yslx.toFixed(2)+'</td>';
						content+='<td id="ysbj'+i+'">'+new_ysbj.toFixed(2)+'</td>';
		 			    content+='<td id="dsbj'+i+'">'+new_sybj.toFixed(2)+'</td>';					
						content+='</tr>';
						
					 }
					 $(".jstr").append(content);
				 }else if(type == "MYFX"){
					//月还本息
					   var yslx = (monthRate * toal)/100;
					   $("#mthns").html(month+'月');
					   $("#mtoal").html(toal+'元');
					   var yslxTotle = 0;
					   
					   $(".jstr").html("");
						 var content='<tr>';
						 content+='<th>期次</th>';
						 content+='<th>偿还本息(元)</th>';
						 content+='<th>偿还利息(元)</th>';
						 content+='<th>偿还本金(元)</th>';
		 				 content+='<th>剩余本金(元)</th>';
						 content+='</tr>';
						 
					 for(var i=1;i<=month;i++){
						 var new_ysbx = 0;
						 var new_ysbj = 0;
						 var new_yslx = 0;
						 var new_sybj = parseFloat(toal);
						 new_yslx = yslx;
						 if(i == month){
							 new_ysbj = parseFloat(toal);
							 new_sybj = 0;
						 }
						 new_ysbx = new_yslx + new_ysbj;
					  	 
					  	content+='<tr>';
					  	content+='<td>'+i+'</td>';
						content+='<td id="ysbx'+i+'">'+new_ysbx.toFixed(2)+'</td>';
						content+='<td id="yslx'+i+'">'+new_yslx.toFixed(2)+'</td>';
						content+='<td id="ysbj'+i+'">'+new_ysbj.toFixed(2)+'</td>';
		 			    content+='<td id="dsbj'+i+'">'+new_sybj.toFixed(2)+'</td>';
						content+='</tr>';
						
						yslxTotle  = accAdd(yslxTotle,new_yslx.toFixed(2));
						
					 }
					 $("#ghbx").html(yslxTotle.toFixed(2)+'元');
					 $(".jstr").append(content);
					 
				 }
		});

</script>
</body>
</html>

运行结果

在这里插入图片描述

三毛村滴雪鱼粉
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
房贷计算器js版本
fareast_mzh的博客
06-30 927
【代码】房贷计算器js版本。
用JavaScript制作一个贷款计算器（注：附带详细注释）
qq_44108944的博客
05-06 2176
一个贷款计算器Web应用 提示：该例子集中使用了诸多技术，展示了真实环境下的客户端JavaScript（包括HTML和CSS）编程。 文章目录一个贷款计算器Web应用前言图1-1一、主要功能点：二、代码实现1.HTML2.CSS3.JavaScript总结 前言 tips：在看代码之前应该先阅读本段文字。你不需要理解所有内容，代码中有着完整的注释，至少你应该能正确运行这段代码得到如图1-1所示的界面。这里的例子展示了诸多JavaScript语言核心特性，同样展示了重要的客户端JavaScript技术：
纯原生JS+bootstrap4贷款计算器(等额本息、等额本金)
最新发布
A123474JJ的博客
12-05 543
因为工资业务上的需要，研究一下贷款吧，这玩意挺烧脑，哈哈哈~觉得有用的小伙伴记得关注一下哦。
房贷计算器
lianghyan的专栏
06-06 1122
提供了计算等额本息法和等额本金法来计算房贷还款在某月的本金，利息等相关信息
js+bootstrap+jquery+vue实现房贷计算器
qq_60676778的博客
07-21 344
js+bootstrap+jquery+vue实现房贷计算器
基于JavaScript的贷款计算器
03-11
在这个基于JavaScript的贷款计算器项目中，我们主要探讨以下几个关键知识点： 1. **DOM操作**：HTML（文档对象模型）是网页内容的结构化表示，JavaScript通过DOM API可以动态地操作这些元素。在贷款计算器中，...
interest-calculator:基于 JavaScript 的利息计算器
08-04
**利息计算器原理与实现** 利息计算是金融领域中常见的计算方式，主要分为单利和复利两种模式。本文将深入探讨这两种计算方法，并基于JavaScript语言介绍如何构建一个基本的利息计算器。 ### 单利计算 单利计算是...
贷款计算器
02-10
贷款计算器是一种在线工具，用于帮助用户计算贷款的月还款额、总利息以及整个贷款周期的总支付金额。在本文中，我们将深入探讨如何使用JavaScript来创建一个贷款计算器，并理解涉及的相关概念。 首先，我们需要理解...
用html+js实现的等额本息贷款月供计算器
01-14
实现一个等额本息贷款月供计算器通常涉及以下几个关键知识点： 1. **贷款本金**：这是借款人的初始借款金额，是计算月供的基础。 2. **年利率**：贷款的年利率是银行对贷款收取的利息比率，用于计算每月应支付的...
jQuery房地产贷款计算器代码
04-02
本文将深入解析"jQuery房地产贷款计算器代码"，并探讨其背后的实现原理和实际应用。 一、jQuery基础 jQuery 是一种轻量级的JavaScript库，它的核心特性包括选择器、DOM操作、事件处理、动画效果和Ajax交互等。在房...
jQuery房贷计算器
06-01
jQuery房贷计算器,应用于各种贷款计算的统计图
js等额本息计算
luck_lin
12-21 2162
利率(年)：4.9%(基准) *(1+20%)(上浮) = 5.88% 贷款额度(万)：50 贷款年限(年)：25(300期) 计算月供： 500000*(0.0588/12*Math.pow((1+0.0588/12), 300)) / (Math.pow((1+0.0588/12), 300)-1) =3184.930106361302（元）...
一个JavaScript实现的贷款计算器
Winterto1990的博客
10-04 5004
基于JavaScript实现的贷款计算器：  >   html>   head>       title>JavaScript Loan Calculatortitle>       style>           .output{font-weight:bold;}           #payment{text-decoration:underline;}    
Vue.js实现房贷计算器
weixin_45356397的博客
05-05 1485
文章目录1. 工具包的引用2.计算器基础实现逻辑公式图片3.代码实现地址4. 操作步骤 1. 工具包的引用 Axios请求包 vant-ui框架 https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js //js cdn https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css //css cdn Vue.js https://cdn.bootcdn.net/ajax/lib
使用 js 实现 贷款计算器功能
风之使者的博客
02-07 5661
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <table> <tr> <th>Enter Loan Data:</th> <td></td> <th
JavaScript - 贷款计算器
王佳斌
06-20 4552
前言 在JavaScript权威指南一书中，有贷款计算器一例。 书中有很多低级错误(我应该是盗版…)，经过一些修改，它成功完成了贷款计算，我把源码放到这里，记录一下。 HTML代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Javascript Loan Cal...
JavaScript：综合案例---房贷计算器的实现
dienangpiao2051的博客
09-06 832
房贷计算器的实现　　（可以使用的编辑器：webStrom、subLime、notePad++、editPlus） 输入数据：　　平方单价 　　 70,000.00 元/平方 　 B1　　租金 　　　　 382.50 元/平方 　　　B2　　物业费　　　 50.50 元/平方 　　　　B3　　面积 　　　　 200 平方...
javascript实现简易计算器
05-14
以下是一个简单的 JavaScript 计算器： ```html <!DOCTYPE html> 简易计算器 <script type="text/javascript"> function calculate() { var num1 = document.getElementById('num1').value; var num2 =...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

三毛村滴雪鱼粉

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值