<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{list-style: none; margin: 0;padding: 0;}
.content{ 500px;margin: 0 auto;}
.calculation{190px;height:250px;padding:5px;background:#65C7F2;border-radius:0 5px 5px 0;float:right;}
.calculation ul{background:rgb(97, 173, 219);padding:5px;color:#fff;}
.calculation ul li{text-indent:2em;}
.calculation .monkey,.select1,.select2{180px;height:30px;margin:0 auto;display:block;border:1px solid #f1f1f1; text-indent:5px;margin-top:10px;}
.calculation .monkey{178px;}
.calculation .calculationBtn{120px;height:30px;line-height:30px;text-align:center;margin:20px auto;background:rgb(236, 136, 75);border-radius:5px;display:block;color:#fff;}
.resulte{280px;height:240px;padding:5px;background:#fff;display:none;border:5px solid #65C7F2;float:left;border-radius:5px 0px 0px 5px;}
.resulte h4{height:45px;line-height:45px; text-indent:1em;color:#777;font-size:17px;}
.resulte ul {padding-top:20px;}
.resulte ul li{ line-height:30px;height:30px;90%;margin:0 auto;border-bottom:1px solid #f1f1f1; }
.resulte ul li span{140px;display:inline-block;padding-left:20px;}
.resulte .calculationBtn{ text-decoration: underline;font-size:16px;color:#0F4DEC;display:block;margin:20px auto;padding:10px 0;text-align:center;}
.close{position:absolute;right:10px;top:10px;display:none;cursor:pointer;padding:3px 10px;background:#65C7F2;color:#fff;border-radius:0 0 0 5px}
</style>
</head>
<body>
<div class="content">
<div class="calculation">
<ul>
<li class="monkeyShow">出借金额：1000元</li>
<li class="rateShow">出借利率：9%</li>
<li class="dataShow">出借期限：3期</li>
</ul>
<input class="monkey" type="text" value="1000"/>
<select class="select1">
<option>9%</option>
<option>10%</option>
<option>11%</option>
<option>12%</option>
</select>
<select class="select2">
<option>3期</option>
<option>6期</option>
<option>9期</option>
<option>12期</option>
<option>24期</option>
<option>36期</option>
</select>
<a href="javascript:;" class="calculationBtn">计算</a>
</div>
<div class="resulte">
<h4>计算结果：</h4>
<ul>
<li class="monkeyShow2"><span>出借金额(本金)</span> 111元</li>
<li class="rateShow2"><span>收获利息(利息)</span>6.41元</li>
<li class="dataMonkey"><span>回款总额 </span>117.41元</li>
</ul>
<a href="/" class="calculationBtn">我要理财</a>
</div>
<div class="close">x</div>
</div>
<script src="jquery.js"></script>
<script>
//借款计算器
$(function(){
$(".jsq").click(function(){
$(".weixin-code1").show();
setTimeout(function(){$(".close").show()},1000);
});
$(".calculation .calculationBtn").click(function(){
$(".resulte").show();
var rateData = parseFloat(show($(".monkey").val(),parseFloat($(".select1").val())/100,parseInt($(".select2").val())).toFixed(2));
$(".monkeyShow2").html("<span>出借金额(本金)</span>"+$(".monkey").val()+"元");
$(".rateShow2").html("<span>收获利息(利息)</span>"+rateData+"元");
var dataGrid = parseInt($(".monkey").val())+parseFloat(rateData);
$(".dataMonkey").html("<span>回款总额</span>"+dataGrid.toFixed(2)+"元");
interest=0;
});
$(".monkey").focus(function(){
$(this).val("");
$(".monkeyShow").text("出借金额：0元");
});
$(".monkey").on("keyup blur",function(){
$(".monkeyShow").text("出借金额："+$(this).val()+"元");
if($(this).val().length<1)
{
$(".monkeyShow").text("出借金额：0元");
};
});
$(".select1").change(function(){
$(".rateShow").text("出借利率："+$(this).val());
});
$(".select2").change(function(){
$(".dataShow").text("出借期限："+$(this).val());
});
$(".close").click(function(){$(".weixin-code1").hide();})
});
var benjin;
var interest = 0;
function show(monkey,nianlilv,qishu){
benjin = parseInt(monkey)-parseInt(monkey)*(parseFloat(nianlilv)/12);
interest += parseInt(monkey)*(parseFloat(nianlilv)/12);
qishu--;
if(qishu>0){
show.apply(this,[benjin,nianlilv,qishu]);
}
return interest;
}
</script>
</body>
</html>
