jquery理财贷款计算器
先放效果图,如下:
需要引入jquery ,bootstrap
jq代码如下:
function pCalculator(amount,term,rating,repayway){ var zhonghe = parseInt(amount),sum = 0,lixi,benjin,obj = {}; //等额本息 if(repayway == 1){ //每月还款 sum = amount * rating/12 * Math.pow((1 + rating/12), term) / ( Math.pow((1 + rating/12) ,term)-1); for(var i = 0; i < term; i++){ // 月利息 lixi = zhonghe * rating / 12; if(lixi < 0){lixi = 0;} // 本金 benjin = sum - lixi; obj[i] = { "月份":i + 1, "利息":lixi.toFixed(2), "本金":benjin.toFixed(2), "月收本息":sum.toFixed(2), "剩余本金":zhonghe.toFixed(2), "总利息":((sum * term) - amount).toFixed(2) }; zhonghe = zhonghe - sum + lixi; } return obj; } //等额本金 if(repayway == 2){ //每月本金 benjin = amount / term; for(var j = 0; j< term; j++){ //debugger; //每月月供额 sum = (amount / term) + (amount - (amount - ((term -j) * benjin) ) ) * rating / 12; //每月本金 benjin = amount / term; //每月利息 lixi = sum - benjin; obj[j] = { \'月份\':j + 1, "利息":lixi.toFixed(2), "本金":benjin.toFixed(2), "剩余本金":zhonghe.toFixed(2), "月收本息":sum.toFixed(2), "总利息":((sum * term) - amount).toFixed(2) } //本金 zhonghe = zhonghe - benjin; } return obj; } }
调用方法如下:
$(".p-calculator .btn-danger").click(function(){ var cal = $(".p-calculator"); var tab = $(".invest-details-table1").find("tbody"); //投资金额 var amount = cal.find(\'input[name=amount]\').val().trim(); //投资期限 var term = cal.find(\'input[name=term]\').val().trim(); //年化利率 var rating = cal.find(\'input[name=rating]\').val().trim() / 100; //还款方式 var repayway = cal.find(\'select[name=repayway]\').val(); //调用 var result = pCalculator(amount,term,rating,repayway); var str = \'\'; for(var i =0; i< term; i++){ str += "<tr>"; str += "<td>"+ result[i]["月份"] +"</td>"; str +="<td>"+ result[i]["月收本息"]+"</td>"; str +="<td>"+ result[i]["本金"]+"</td>"; str +="<td>"+ result[i]["利息"]+"</td>"; str +="<td>"+ result[i]["剩余本金"] +"</td>"; str += "</tr>"; //console.log(parseFloat( result[i]["剩余本金"] ) , parseFloat(result[i]["总利息"]) , parseFloat( result[i]["月收本息"] )) } $("#c1").countTo({ to: amount, speed: 1500, formatter : formatter1 }); $("#c2").countTo({ to: result[0]["总利息"], speed: 1500, formatter: formatter1 }); $("#c3").countTo({ to: result[0]["月收本息"], speed: 1500, formatter : formatter1 }); tab.empty().append(str); console.log(result); return false; })
html代码如下:
<div class="bb2"> <div class="public-title"> <h2>理财计算器</h2> </div> <form class="p-calculator"> <div> <span class="pull-left"> <label>投资金额</label> <input type="text" name="amount" class="form-control" placeholder="输入投资金额">元 </span> <span class="pull-right"> <label>投资期限</label> <input type="text" name="term" class="form-control" placeholder="输入投资期限">月 </span> </div> <div> <span class="pull-left"> <label>年化利率</label> <input type="text" name="rating" class="form-control" placeholder="利率范围5%~20%">% </span> <span class="pull-right"> <label>还款方式</label> <select name="repayway" class="form-control"> <option value="1">等额本息</option> <option value="2">等额本金</option> </select> </span> </div> <div class="text-center"> <button class="btn btn-danger">开始计算</button> </div> </form> </div> <div class="bb2 p-result"> <div class="public-title"> <h3>收益描述</h3> </div> <div class="row"> <div class="col-sm-4 text-center"> 投资金额 <p><i id="c1">0</i><span>元</span></p> </div> <div class="col-sm-4 text-center"> 应收利息 <p><i id="c2">0</i><span>元</span></p> </div> <div class="col-sm-4 text-center"> 月收本金 <p><i id="c3">0</i><span>元</span></p> </div> </div> <div class="result-table"> <h3>本息回款时间表</h3> <table class="table invest-details-table1"> <thead> <tr> <td>期次</td> <td>月收本息(元)</td> <td>月收本金(元)</td> <td>月收利息(元)</td> <td>剩余本金(元)</td> </tr> </thead> <tbody> </tbody> </table> <ul> <li>等额本息,即借款人每月以相等的金额偿还借款本息,也是银行房贷等采用的方法。因计算中存在四舍五入,最后一期还款金额与之前略有不同。</li> <li>每月付息,到期还本,即借款人每月偿还固定利息,最后一期偿还全部本金。</li> <li>注:因计算器采用了以50元为一份的计算方式,计算结果与2013年10月14日之前的债权存在偏差,具体情况以账户中显示的信息为准。</li> </ul> </div> </div>
css代码如下:
/* 计算器 */ .p-calculator{padding: 60px 120px 40px;} .p-calculator > div:not(:last-child){overflow: hidden; margin-bottom: 30px;} .p-calculator .form-control{display: inline-block; width: 235px; margin-right: 14px;} .p-calculator select.form-control{margin-right: 27px;} .p-calculator label{width: 80px; font-weight: normal; color: #666;} .p-calculator span{color: #999;} .p-calculator .btn-danger{padding: 11px 65px; margin-top: 20px;} .p-result{margin-top: 30px;} .p-result .row{margin-top: 40px; color: #999; padding-bottom: 30px;} .p-result .row p{color: #fb3d3d; font-size: 40px; font-family: fzlantinghei;} .p-result .row p > span{color: #333; font-size: 18px;} .p-result .row p > i{font-style: normal;} .result-table{border-top:1px solid #f0f0f0; padding:30px 24px;} .result-table > h3{margin:0; font-size:16px; margin-bottom: 26px;} .result-table ul{list-style: none; padding-left: 0;} .result-table ul li{margin-bottom: 6px;}
完成!
看着有点晕,百度打包下载地址:http://pan.baidu.com/s/1gf7KKSj
提取码:y4sk
博主亲手打包 (>_<)
版权声明:本文为zhangans原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。