• 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;  235px; margin-right: 14px;}
    .p-calculator select.form-control{margin-right: 27px;}
    .p-calculator label{ 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

    博主亲手打包 (>_<) 

  • 相关阅读:
    HTML转码码表
    【转】javascript 小技巧 JavaScript[对象.属性]集锦
    枯燥的数据库插入修改,投机取巧的方法
    asp.net jquery ajax处理json数据
    .net生成zTree标准形式的json数据源
    SqlDateTime 溢出
    limit 与 offset
    祖国六十大寿阅兵
    Esri for Window Phone 7(一) 加载BingMap
    Create a Settings Page for Windows phone
  • 原文地址:https://www.cnblogs.com/zhangans/p/6179663.html
Copyright © 2020-2023  润新知