先放效果图,如下:

需要引入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

博主亲手打包 (>_<)

最新文章

  1. python实现简单爬虫功能
  2. 【Java EE 学习 31】【JavaScript基础增强】【Ajax基础】【Json基础】
  3. 去除Visual Studio引号中的内容和注释中出现的波浪下划线
  4. oracle插入数据
  5. jquery animate()方法使用的注意事项
  6. 一款js点击显示和隐藏的例子(pc,移动端通用)
  7. 用eclipse javaEE编程时,不管什么程序都会出现这个错误[SetContextPropertiesRule]{Context} Setting property &#39;source&#39; to &#39;org.eclipse.jst.jee.server:bookstore&#39; did not find
  8. C语言strcmp()函数:比较字符串(区分大小写)
  9. linux install nginx error
  10. UVa455 Periodic Strings
  11. CentOS 安装数据库笔记
  12. 再起航,我的学习笔记之JavaScript设计模式13(装饰者模式)
  13. Log4j各级别日志重复打印的问题
  14. [转]Example Design - Using the AXI DMA in polled mode to transfer data to memory
  15. .NET Core WEB API中接口参数的模型绑定的理解
  16. github和gitlab并存
  17. 问题:mysql服务正在启动 mysql服务无法启动 &amp;&amp; mysql启动脚本 mysql关闭脚本
  18. MySQL 通用查询日志(General Query Log)
  19. linux下搭建禅道项目管理系统
  20. SSM,即Spring+SpringMVC+MyBatis三个开源框架的整合框架集。

热门文章

  1. Kali v2.1.2 for Raspberry Pi 3B
  2. RSS阅读器
  3. 文本处理三剑客之sed命令
  4. 实例:对2个Makefile的备注
  5. C语言中 指向函数的指针 简介
  6. 每天成长一点---WEB前端学习入门笔记
  7. [LeetCode] Fraction to Recurring Decimal 分数转循环小数
  8. 20145222《信息安全系统设计基础》Linux常用命令汇总
  9. 在Windows7上如何找到Cookie(亲测100%可找到)
  10. C#文件目录操作完全手册