標籤:
<!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>
借款計算機(金融)