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
));
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;
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
= 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
>
运行结果
