借款计算器（金融）

出借计算器实现

最新推荐文章于 2025-08-24 14:42:46 发布

转载最新推荐文章于 2025-08-24 14:42:46 发布 · 190 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/rainheader/p/4597216.html

本文介绍了一个简单的出借计算器实现过程，通过HTML、CSS和JavaScript构建了一个可以计算出借本金、利息及回款总额的小工具。用户可以输入出借金额、选择利率及期限，点击计算按钮后，页面会显示相应的计算结果。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style> 
		*{list-style: none; margin: 0;padding: 0;}
		.content{ width: 500px;margin: 0 auto;}
		.calculation{width: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{width:180px;height:30px;margin:0 auto;display:block;border:1px solid #f1f1f1; text-indent:5px;margin-top:10px;}
	  .calculation .monkey{width:178px;}
	  .calculation .calculationBtn{width: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{width: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;width:90%;margin:0 auto;border-bottom:1px solid #f1f1f1; }
	  .resulte ul li span{width: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>

转载于:https://www.cnblogs.com/rainheader/p/4597216.html