jquery理财贷款计算器

时间：2022-10-29 18:23:13

先放效果图，如下：

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

博主亲手打包 (>_<)

相关文章