目录
准备工作(2kb-3kb)
jquery
https://pan.baidu.com/s/1_fNhj5HLE4ekV9qmUlMpUQ
提取码：0602
计算器代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- 换成自己的jquery地址,否则计算功能无法使用-->
<script type = "text/javascript" src="../static/jquery-3.6.0.js"></script>
<meta charset="UTF-8">
<title>理财计算器</title>
<meta name="keywords" content="理财计算器">
</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">
<option value="1">1个月</option>
<option value="3">3个月</option>
<option value="5">5个月</option>
<option value="10">10个月</option>
<option value="12">12个月</option>
<option value="24">24个月</option>
<option value="36">36个月</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>
css样式:(美观代码,无实际意义)
table{
/*设置表格的宽度*/
width: 500px;
/*设置居中*/
margin: 0 auto;
/*设置边框*/
/*border: 1px solid black;*/
/**
* table的td之间默认有一个距离，通过border-spacing属性可以设置这个像素
*/
/*border-spacing: 0px;*/
/**
* border-collapse可以用来设置表格的边框合并，如果设置了该属性，border-spacing会自动失效
*/
border-collapse: collapse;
}
/**
* 伪类nth-child的even参数可以选中偶数行，而odd则可以选中奇数行。
*
* 温馨提示:
* nth-child属性IE8及以下版本并不支持，若非要达到相同的效果则需要引入JS来搞事情。
*/
tr:nth-child(even){
background-color: #b2dba1;
}
/**
* 当鼠标移入到tr标签后，会改变颜色
*/
tr:hover{
background-color: #c7ddef;
}
/*为td标签设置样式*/
td,th{
/*设置边框*/
border: 1px solid black;
}
421
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
