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

博主亲手打包 (>_<)