银行利息怎么算?

我们不能笼统的说利息如何计算,利息计算可分为存款和贷款。而存款又分:活期,定期(三个月,半年,一年,三年,五年)等,贷款又分为:一次性偿还,分期偿还(等额本息,等额本金),说这些只是告诉你利息不可一概而论;我们先看看关于利率方面的介绍。

介绍:


  1. 算含蓄存款利息的基本规定:各种储蓄存款的存期一律按对年、对月、对日计算;不论大月、小月、平月或闰月,每月均按30天计算,全年按360天计算;足一个月的零头天数,按实际天数计算。计算存期采用算头不算尾的办法,即从存入的当天一直算到支取目的前一天为止。利随本清,不计复利。除活期储蓄存款未清户按年度结息外,其余各种储蓄存款,不论存期多长,一律利随本清,不计复利。自动转存的存款,视同到期办理,利息可并入本金。
     
  2. 银行利息怎么算计息起点和尾数: 计息起点和尾数处理的规定。计息起点为元位,元以下角分位不计利息。利息金额算至分位,分位以下四舍五入。凡需分段计息的,每段计算应先保留至厘位,各段利息相加得出利息总额,再将分位以下的厘位四舍五入。
     
  3. 银行利息怎么算利息单位:利息单位及其换算。年利率按本金的百分之几表示(%),月利率按本金的千分之几表示(‰),日利率按本金的万分之几表示。其换算公式为:年利率=月利率×12 ;月利率=日利率×30 ;年利率=日利率×360


一、存款利息

我们先来说说存款利息是如何计算的!

根据上面的介绍,我们可以知道利息是按每一期的利率算的,而利率又分日利率、月利率、年利率;而算法公式都是一样的。所以剩下的你就按照公式套就可以了。

我们先来推导一下计算公式;先来设置几个常数,为便于公式的推导计算,所取数字都是简单计算的数字;

每期的利率是10%用P表示,存款100元用A表示。

利息 = A*P

本期总本息 = A*(1+P)          ①

第2期(本息自动转存的金额) = [A*(1+P)]*(1+P)

第3期(本息再次转存的金额) = {[A*(1+P)]*(1+P)}*(1+p)

     ..............      后面的期次这里就不全部列出了,通过上面的式子我们进行变式换算:

得到n期后的总本息总额 = A*(1+P)^n    (^n:表示n次方)        ②

根据①式和②式可以推导出:n期的利率 = ((1+P)^n)-1 或 (1+P)^n-1

我先举个整存整取的例子:

假如你有10万元放到银行里,整存整取,三个月的年利率为1.71%,六个月的年利率为1.98%,一年的年利率为2.25%,两年的年利率为2.79%,利息各是多少?哪种存款最好?

如果只关心利息的多少,可以进行简单的计算进行比较,分别各以三个月、六个月、一年、两年为一期,以10万元本金,两年的时间进行计算,如下:
以三个月期为例:三个月利率 1.71%*3/12=1.71%/4=0.4275%,两年有8个3个月,就是8期。
三个月到期自动转存:本金和利息总额是100000*(1+0.4275%)^8(8次方)= 103471.61元
六个月自动转存计算:本金和利息总额是100000*(1+1.98%*6/12)^4 = 104019.20元
一年期自动转存计算:本金和利息总额是100000*(1+2.25%)^2 = 104550.63元
二年期自动转存计算:本金和利息总额是100000*(1+2.79%*2)= 105580元
因此,从利息上看2年最多,但两年中本金不能动,三个月利息最少,你可以每个三个月动一次本金。

再举个例子:

假如现在的3个月定期存款利率是2.07%,假如存入一万元,那么三个月后到期日我将获得多少利息?如果我连续存四次三个月的定期,造成利滚利,这样与一年定期3.06%相比有多大差别?

  1. 年利率/360=日利率。银行计算存期以360“天”为一年,所以可以把年利率看作是与银行约定的总收益,这样就可以认为每天都得到这份收益的1/360。  
  2. 存期(日)=(到期年-起存年)*360+(到期月-起存月)*12+(到期日-起存日)。每个月份都被看作30天,所以实际的天数跟计息天数会发生不一致,所以前面斜体的“天”用了引号。我们看下面的例子就知道。
  3. 3个月定期的总利率=月利率*3=(年利率/12)*3=0.5175%,
    一年是四期3个月定期的总本息=10000*(1+0.5175%)^4=10208.6124 元。
  4. 一年定期的总本息=10000*(1+3.06%)=10306元
    四期三个月的比一年定期少量97.4元 
    四期三个月定期的利率=1*(1+0.5175%)^4-1=2.086% ,比一年定期3.06%相比少了0.974%。假设还是前面所说的10000元,那么根据利息公式:利息=本金*利率=10000×0.974%=97.4,就是差了97块4毛钱。


这里隐藏着一个假象。表面上收益较高的长期定期反而有可能不如连续的多次短期!这是因为利率是会变动的,而银行计息仅仅取决于存入当天的利率。这样,在存期内如果国家有上调利率的政策,你都不会反映到以后的利息中;例如2015年一年的时间里就连续5次降息,如果是在一个加息频繁的时期,如果把钱都存成3年、5年的定期存款,不仅要忍受流动资金减少带来的不便,还会使存款面临加息导致的相对贬值的风险,到时候提也不是不提也不是!所以具体怎么存法还要看当前的政策形势! 

二、贷款利息

贷款利息的计算又不太一样,因为不同的还款方式公式也不相同,银行贷款利息,一般是按月复利计算的,分期还款方式有:短期一次性还本付息,等额本息,等额本金.

一次性还本息的计算公式:= 本金×(1+期利率)^期数

等额本息还款公式:

 等额本息还款公式推导 设贷款总额为A,银行月利率为β,总期数为m(个月),月还款额设为X, 

        则各个月所欠银行贷款为: 

        第一个月A(1+β)-X 

        第二个月[A(1+β)-X](1+β)-X = A(1+β)^2-X[1+(1+β)] 

        第三个月{[A(1+β)-X](1+β)-X}(1+β)-X = A(1+β)^3-X[1+(1+β)+(1+β)^2] 

        …… 

        由此可得第n个月后所欠银行贷款为:A(1+β)^n-X[1+(1+β)+(1+β)^2+…+(1+β)^(n-1)]      ①式

可以看到[1+(1+β)+(1+β)^2+…+(1+β)^(n-1)]中括号内的式子是等比数列;由于还款总期数为n,也即第n月刚好还完银行所有贷款,剩余为0,因此有:

        A(1+β)^n-X[(1+β)^(n-1)]/β = 0 

。。。。。。。。。。。。。。。。。。。。。

等比数列a1/a2=a2/a3=a3/a4.....=q,所以q为公比,所以An=A(n-1)× q,根据等比数量通项公式An=A1*q^(n-1),

等比数量求和公式推导:

Sn=A1+A2+......+An

两边乘以q则:q*Sn=A2+......+An+An+1   =>  q*Sn-Sn = A(n+1) - A1

把等比数列通项公式An=A1*q^(n-1)带入上式, (q-1)Sn=A1*q^n - A1  =>  Sn = A1((q^n)-1)/(q-1)

所以①式根据等比数列求和公式可得:A(1+β)^n-X[1+(1+β)+(1+β)^2+…+(1+β)^(n-1)] = A(1+β)^n-X[(1+β)^n-1]/β 

        由于还款总期数为m,也即第m月刚好还完银行所有贷款,因此有: 

 

假如贷款60000元,一年(12个月),按现在一年期贷款年利率5.31%(月利率:5.31%/12=0.4425%)计算

1.一次性还本付息,本息合计=60000*(1+0.4425%)^12=63264.69元

=2.等额本息,还款是每一期(每个月)还款额都是一样的还款,

=

=

=

=

=============================================================================

http://zhidao.baidu.com/link?url=doZTov5sm4p5Rr9uPl_9MOdV5qBW9Uvxsh9QMcnXEF3oeajwFQ8mW0nryyl2x1P1IRf0rdT9A6FzWCvDEjot6a

http://wenku.baidu.com/link?url=oEvQaQbigg5JWNnUTjbTW9P1wPiwW1yZ4CofjqdSEc35D-eUnzCR3toIA8zPwbSoNCaHGeA-6AuB5H75Dobj8_UaPYfuHi_96kgw2vSBpdK

http://zhidao.baidu.com/link?url=2947ztv9fxpuqOhPeTr2hiWkLcdccbRrf_yiS_8mcE5U7GCXBqk6o_nV7kgdMYdyalpehP_6fbosEYad9Snlqq

=====

=http://www.kaixin001.com/repaste/20707681_1696603196.html?stat=orrecn_out

=http://www.zybang.com/question/28a6d1e1bd62517db2d94ddf9f05a320.html

========


银行利息计算公式推导(存款,贷款)_ico银行利息计算公式推导(存款,贷款)_xml_02


<!DOCTYPE html>
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=gb2312">
<meta charset="utf-8"/>
<title>JS计算器,贷款利率计算器</title>
<!--参考出处:http://www.codefans.net/jscss/code/3613.shtml-->

<style> /* 这是一个CSS样式表:定义了程序输出的样式 */
body{ font-size:12px;}
#payment { } /* 定义 id="payment" 的元素样式 */
#graph { border: solid black 1px; } /* 图表有一个1像素的边框 */
th, td {vertical-align: top; } /* 表格单元格对齐方式为顶端对齐 */
table{
border-collapse: collapse;
border: none;
}
td, th{
border: solid #000 1px;
}
.output { font-weight: bold; } /* 计算结果定义为粗体 */
.btn{
font-weight: 700;
line-height: 30px;
width: 100px;
height: 35px;
}
.tbl{
width:95%;
}
.td1{
width:70px
}
.td2{
width:140px
}
.help
{
float:right;
cursor:pointer;
line-height: 10px;
margin-top: -6px;
margin-right: -6px;
}
.nr {
color: #666;
font-size: 12px;

padding-top:0px;
margin: 8px -2px -2px;
}
.tsk {
background: #f8f8f8;
border: 1px solid #CCC;
box-shadow: 0 1px 5px #DDD;
line-height: 20px;
padding: 10px;
position: absolute;
display: none;
z-index: 10000;
width:215px;
left:1px;
top:16px
}

.circle {
width: 15px;
height: 15px;
font-weight: 700;
text-indent:4px;

cursor:pointer;
float:left;
line-height:16px;
background: #5A8BDC;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
.resultInfo{
font-weight:normal;
font-size:10px;
color:red;
}

</style>

<script>
function $(id){ return document.getElementById(id); }
function helpClick(obj)
{
$(obj.id+"_help").style.display = "block";
}

function hidHelp(obj)
{
obj.parentElement.style.display = "none";
}



function Test()
{
var t1=document.createElement("table");
t1.width="100%";
t1.insertRow();
t1.rows[0].innerHTML="<th width='10%'>期次</th><th width='20%'>本金</th><th width='20%'>利息</th><th width='20%'>月供</th><th>剩余贷款</th>";

/*
t1.insertRow();
t1.rows[t1.rows.length-1].insertCell();
t1.rows[t1.rows.length-1].insertCell();
t1.rows[t1.rows.length-1].insertCell();
t1.rows[t1.rows.length-1].cells[0].innerHTML = 1;
t1.rows[t1.rows.length-1].cells[1].innerHTML = 2;
t1.rows[t1.rows.length-1].cells[2].innerHTML = 3;
*/

//t1.rows[t1.rows.length-1].insertCell()
//tab.appendChild("<tr><td>1</td><td>2</td></tr>");
//tab.appendChild(t1);

//alert(newRow.cells.length);
//div.appendChild(table);
//cell.innerHTML = '';
//StringBuilder html = new StringBuilder("<table width='100%'>");
//document.getElementById('zhutiTable').appendChild(t);



// 查找文档中用于输入输出的元素
var amount = document.getElementById("amount");//贷款总额
var apr = document.getElementById("apr");//年利息
var years = document.getElementById("years");//偿还期限
var zipcode = document.getElementById("zipcode");//邮政编码(查找放贷人)
var payment = document.getElementById("payment");//月还贷款额
var total = document.getElementById("total");//还贷款总额
var totalinterest = document.getElementById("totalinterest");//贷款总利息

// 假设所有的输入都是合法的,将从input元素中获取输入数据
// 将百分比格式转换为小数格式,并从年利率转换为月利率
// 将年度赔付转换为月度赔付
var principal = parseFloat(amount.value);
var interest = parseFloat(apr.value) / 100 / 12;
var payments = parseFloat(years.value) * 12;

// 现在计算月度赔付的数据
var x = Math.pow(1 + interest, payments); // Math.pow()进行幂次运算
var monthly = (principal*x*interest)/(x-1);



//月还款额=贷款金额*年利率/12*(1+年利率/12)^(年期*12)/((1+年利率/12)^(年期*12)-1)
var yue = principal*(interest)*x/(Math.pow(1+interest,payments)-1);
var shy = principal;
for(i=0;i<payments;i++){
//第N月本金: 月还款额=(1+年利率/12)^(N-1-年期*12)
var y_bj=Math.pow(interest+1,i-payments)
//第N月利息: 月还款额=(1-(1+年利率/12)^(N-1-年期*12))
var y_lx=1-Math.pow(1+interest,i-payments);
t1.insertRow(t1.rows.length);
t1.rows[t1.rows.length-1].insertCell();
t1.rows[t1.rows.length-1].insertCell();
t1.rows[t1.rows.length-1].insertCell();
t1.rows[t1.rows.length-1].insertCell();
t1.rows[t1.rows.length-1].insertCell();
t1.rows[t1.rows.length-1].cells[0].innerHTML = i+1;
t1.rows[t1.rows.length-1].cells[1].innerHTML = (monthly*y_bj).toFixed(2);
t1.rows[t1.rows.length-1].cells[2].innerHTML = (monthly*y_lx).toFixed(2);
t1.rows[t1.rows.length-1].cells[3].innerHTML = monthly.toFixed(2);
t1.rows[t1.rows.length-1].cells[4].innerHTML = (principal-=(monthly*y_bj)).toFixed(2);
}


var tr=$("tr_tab");
tr.cells[0].innerHTML=t1.outerHTML;


}

</script>

</head>
<body>

<table id="t_main" width=500px>
<tbody>
<tr>
<th colspan=2 style="text-align:left;font-size:24px;background-color:#3f3">输入数据:</th>
</tr>
<tr>
<td width=100px>
<!--Amount of the loan-->贷款总金额:</td>
<td><input id="amount" value="500000" /><span style="margin-left:-18px">元</span></td>
</tr>
<tr>
<td>
<!--Annual interest-->基准年利率:</td>
<td><input id="apr" value="3.5" /><span style="margin-left:-14px">%</span></td>
</tr>
<td>
利率折扣:</td>
<td>
<select id=llzk style="width:173px;">
<option value="2.0" >基准利率2倍</option>
<option value="1.5" >基准利率1.5倍</option>
<option value="1.4" >基准利率1.4倍</option>
<option value="1.3" >基准利率1.3倍</option>
<option value="1.2" >基准利率1.2倍</option>
<option value="1.1" >基准利率1.1倍</option>
<option value="1.05">基准利率1.05倍</option>
<option value="1.0" selected=true>基准利率</option>
<option value="0.95">基准利率9.5折</option>
<option value="0.9" >基准利率9折</option>
<option value="0.88">基准利率8.8折</option>
<option value="0.85">基准利率8.5折</option>
<option value="0.83">基准利率8.3折</option>
<option value="0.8" >基准利率8折</option>
<option value="0.75" >基准利率7.5折</option>
<option value="0.7" >基准利率7折</option>
</select>
</td>
</tr>
<tr>
<td>
<!--Repayment period (years)-->贷款期限:</td>
<td><input id="years" value="30" /><span style="margin-left:-18px">年</span></td>
</tr>
<tr style="display:none">
<td>
<!--Zipcode (to find lenders)-->邮政编码(查找放贷人):</td>
<td><input id="zipcode" />
<span id="lenders"></span>
</td>
</tr>
<tr>
<th colspan=2>
<input class="btn" type=button onclick="calculate();" value="计 算" />&nbsp;&nbsp;
<input class="btn" type=button onclick="Test();" value="测 试" />&nbsp;&nbsp;
<input class="btn" type=reset value="重 置" />
</th>
</tr>
<tr>
<th colspan=2 style="text-align:left;font-size:24px;background-color:#3f3">
<!--Approximate Payments-->输出结果:<span class="resultInfo">此结果仅供参考,实际应缴费以当地为准</span>
</th>
</tr>
<tr>
<td>
<!--Monthly payment-->每月付款:</td>
<td>
<input id="payment" value="30" />
</td>
</tr>
<tr>
<td>
<!--Total payment-->付款总额:</td>
<td><span class="output" id="total">0</span></td>
</tr>
<tr>
<td>
<!--Total interest-->利息总额:</td>
<td><span class="output" id="totalinterest">0</span></td>
</tr>
<tr>
<td colspan="2">
<table id="result" style="width:100%">
<tbody>
<tr>
<td style="position:relative;width:50%;">
<div>
<span style="float:left">每月等额还款</span>
<div class="circle" onclick="helpClick(this)" id="debxhk">?</div>
</div>
<div class="tsk" id="debxhk_help">
<div onclick="hidHelp(this)" class="help">&nbsp;X</div>
<div class="nr">
每月等额还款即等额本息还款法,指借款人每月按相等的金额偿还贷款本息,其中每月贷款利息按月初剩余贷款本金计算并逐月结清。
</div>
</div>
<table style="clear:both" cellpadding="0" cellspacing="0" class="tbl">
<tbody>
<tr>
<td class="td1">贷款总额</td>
<td class="td2"><var id="_debx_dkze">0</var> 元</td>
</tr>
<tr>
<td class="td1">还款月数</td>
<td class="td2"><var id="_debx_hkys">0</var> 月</td>
</tr>
<tr>
<td class="td1">首月还款</td>
<td class="td2"><em id="_debx_syhk">0</em> 元</td>
</tr>
<tr>
<td class="td1">每月递减</td>
<td class="td1"><em id="_debj_mydj">0</em> 元</td>
</tr>
<tr>
<td class="td1">总付利息</td>
<td class="td2"><em id="_debx_zflx">0</em> 元</td>
</tr>
<tr>
<td class="td1">本息合计</td>
<td class="td2"><em id="_debx_bxhj">1,039,024.42</em> 元</td>
</tr>
</tbody>
</table>
</td>
<td style="position:relative">
<div>
<span style="float:left">逐月递减还款</span>
<div onclick="helpClick(this)" class="circle" id="debjhk">?</div>
</div>
<div class="tsk" id="debjhk_help">
<div onclick="hidHelp(this)" class="help">&nbsp;X</div>
<div class="nr">
逐月递减还款即等额本金还款法,指本金保持相同,利息逐月递减,月还款数递减;由于每月的还款本金额固定,而利息越来越少,贷款人起初还款压力较大,但是随时间的推移每月还款数也越来越少。
</div>
</div>
<table style="clear:both" cellpadding="0" cellspacing="0" class="tbl">
<tbody>
<tr>
<td class="td1">贷款总额</td>
<td class="td2"><var id="_debj_dkze">0</var> 元</td>
</tr>
<tr>
<td class="td1">还款月数</td>
<td class="td2"><var id="_debj_hkys">0</var> 月</td>
</tr>
<tr>
<td class="td1">首月还款</td>
<td class="td2"><em id="_debj_syhk">0</em> 元
</td>
</tr>
<tr>
<td class="td1">每月递减</td>
<td class="td1"><em id="_debj_mydj">0</em> 元</td>
</tr>
<tr>
<td class="td1">总付利息</td>
<td class="td2"><em id="_debj_zflx">0</em> 元</td>
</tr>
<tr>
<td class="td1">本息合计</td>
<td class="td2"><em id="_debj_bxhj">1,039,024.42</em> 元</td>
</tr>
</tbody>
</table> </td>
</tr>
<tr style="display:none">
<td colspan="2">
<span class="resultInfo">此结果仅供参考,实际应缴费以当地为准</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>




<tr>
<td colspan=2><span style="font-weight:bold;">图表:贷款金额,累计金额,利息支付</span></td>
</tr>
<tr>
<td colspan="2">
<canvas id="graph" width="500" height="250"></canvas>
</td>
</tr>
<tr id="tr_tab">
<td colspan="2">
</td>
</tr>
</tbody>
</table>
<div id="list"></div>

<script>
function calculate() {

//生成每月还款额表格
Test();

// 查找文档中用于输入输出的元素
var amount = document.getElementById("amount");//贷款总额
var apr = document.getElementById("apr");//年利息
var years = document.getElementById("years");//偿还期限
var zipcode = document.getElementById("zipcode");//邮政编码(查找放贷人)
var payment = document.getElementById("payment");//月还贷款额
var total = document.getElementById("total");//还贷款总额
var totalinterest = document.getElementById("totalinterest");//贷款总利息

// 假设所有的输入都是合法的,将从input元素中获取输入数据
// 将百分比格式转换为小数格式,并从年利率转换为月利率
// 将年度赔付转换为月度赔付
var principal = parseFloat(amount.value);
var interest = parseFloat(apr.value) / 100 / 12;
var payments = parseFloat(years.value) * 12;

// 现在计算月度赔付的数据
var x = Math.pow(1 + interest, payments); // Math.pow()进行幂次运算
var monthly = (principal*x*interest)/(x-1);



//月还款额=贷款金额*年利率/12*(1+年利率/12)^(年期*12)/((1+年利率/12)^(年期*12)-1)
var yue = principal*(interest)*x/(Math.pow(1+interest,payments)-1)
//第N月本金: 月还款额=(1+年利率/12)^(N-1-年期*12)
var y_bj=Math.pow(interest+1,-payments)
//第N月利息: 月还款额=(1-(1+年利率/12)^(N-1-年期*12))
var y_lx=1-Math.pow(1+interest,-payments)

// 如果结果没有超过JavaScript能表示的数字范围,且用户的输入也正确
// 这里所展示的结果就是合法的
if (isFinite(monthly)) {
// 将数据填充至输出字段的位置,四舍五入到小数点后两位数字
//payment.innerHTML = monthly.toFixed(2);
payment.value=monthly.toFixed(2);
total.innerHTML = (monthly * payments).toFixed(2);
totalinterest.innerHTML = ((monthly*payments)-principal).toFixed(2);

// 将用户的输入数据保存下来,这样在下次访问时也能取到数据
save(amount.value, apr.value, years.value, zipcode.value);

// 找到并展示本地放贷人,但忽略网络错误
try { // 捕获这段代码抛出的所有异常
getLenders(amount.value, apr.value, years.value, zipcode.value);
}
catch(e) { /* 忽略这些异常 */ }

// 最后,用图表展示贷款余额、利息和资产收益
chart(principal, interest, monthly, payments);
}
else {
// 计算结果不是数字或者是无穷大,意味着输入数据是非法或不完整的
// 清空之前的输出数据
payment.innerHTML = ""; // 清空元素的文本内容
total.innerHTML = ""
totalinterest.innerHTML = "";
chart(); // 不传参数的话就是清除图表
}
}

// 将用户的输入保存至localStorage对象的属性中
// 这些属性在再次访问时还会继续保持在原位置
// 如果你在浏览器中按照file:// URL的方式直接打开本地文件,
// 则无法在某些浏览器中使用存储功能(比如FireFox)
// 而通过HTTP打开文件是可行的
function save(amount, apr, years, zipcode) {
if (window.localStorage) { // 只有在浏览器支持的时候才运行这里的代码
localStorage.loan_amount = amount;
localStorage.loan_apr = apr;
localStorage.loan_years = years;
localStorage.loan_zipcode = zipcode;
}
}

// 在文档首次加载时,将会尝试还原输入字段
window.onload = function() {
// 如果浏览器支持本地存储并且上次保存的值是存在的
if (window.localStorage && localStorage.loan_amount) {
document.getElementById("amount").value = localStorage.loan_amount;
document.getElementById("apr").value = localStorage.loan_apr;
document.getElementById("years").value = localStorage.loan_years;
document.getElementById("zipcode").value = localStorage.loan_zipcode;
}
};

// 将用户的输入发送至服务器端脚本(理论上)将
// 返回一个本地放贷人的链接列表,在这个例子中并没有实现这种查找放贷人的服务
// 但如果该服务存在,该函数会使用它
function getLenders(amount, apr, years, zipcode) {
// 如果浏览器不支持XMLHttpRequest对象,则退出
if (!window.XMLHttpRequest) return;

// 找到要显示放贷人列表的元素
var ad = document.getElementById("lenders");
if (!ad) return; // 如果返回为空,则退出

// 将用户的输入数据进行URL编码,并作为查询参数附加在URL里
var url = "getLenders.php" + // 处理数据的URL地址
"?amt=" + encodeURIComponent(amount) + // 使用查询串中的数据
"&apr=" + encodeURIComponent(apr) +
"&yrs=" + encodeURIComponent(years) +
"&zip=" + encodeURIComponent(zipcode);

// 通过XMLHttpRequest对象来提取返回数据
var req = new XMLHttpRequest(); // 发起一个新的请求
req.open("GET", url); // 通过URL发起一个HTTP GET请求
req.send(null); // 不带任何正文发送这个请求

// 在返回数据之前,注册了一个事件处理函数,这个处理函数
// 将会在服务器的响应返回至客户端的时候调用
// 这种异步编程模式在客户端JavaScript中是非常常见的
req.onreadystatechange = function() {
if (req.readyState == 4 && req.status == 200) {
// 如果代码运行到这里,说明我们得到了一个合法且完整的HTTP响应
var response = req.responseText; // HTTP响应是以字符串的形式呈现的
var lenders = JSON.parse(response); // 将其解析为JS数组

// 将数组中的放贷人对象转换为HTML字符串形式
var list = "";
for(var i = 0; i < lenders.length; i++) {
list += "<li><a href='" + lenders[i].url + "'>" +
lenders[i].name + "</a>";
}

// 将数据在HTML元素中呈现出来
ad.innerHTML = "<ul>" + list + "</ul>";
}
}
}

// 在HTML<canvas>元素中用图表展示月度贷款余额、利息和资产收益
// 如果不传入参数的话,则清空之前的图表数据
// principal:贷款金额
// interest:利息
// monthly:每月还款额
// payments:还款期限
function chart(principal, interest, monthly, payments) {
var graph = document.getElementById("graph"); // 得到<canvas>标签
graph.width = graph.width; // 用一种巧妙的手法清除并重置画布

// 如果不传入参数,或者浏览器不支持画布,则直接返回
if (arguments.length == 0 || !graph.getContext) return;

// 获得画布元素的"context"对象,这个对象定义了一组绘画API
var g = graph.getContext("2d"); // 所有的绘画操作都将基于这个对象
var width = graph.width, height = graph.height; // 获得画布大小

// 这里的函数作用是将付款数字的数据转换为像素
function paymentToX(n) { return n * width/payments; }
function amountToY(a) { return height-(a * height/(monthly*payments*1.05));}

// 总付款数据是一条从(0,0)到(payments, monthly*payments)的直线
g.moveTo(paymentToX(0), amountToY(0)); // 从左下方开始
g.lineTo(paymentToX(payments),amountToY(monthly*payments));// 绘至右上方
g.lineTo(paymentToX(payments), amountToY(0)); // 再至右下方
g.closePath(); // 将结尾连接至开头
g.fillStyle = "#f88"; // 亮红色
g.fill(); // 填充矩形
g.font = "bold 12px sans-serif"; // 定义一种字体
g.fillText("总支出", 15,20); // 将文字绘制到图例中

// 总贷款额的还款进度,很多资产数据并不是线性的,很难将其反映至图表中
var equity = 0;
g.beginPath(); // 开始绘制新图形
g.moveTo(paymentToX(0), amountToY(0)); // 从左下方开始
for(var p = 1; p <= payments; p++) { // 计算出每一笔赔付的利息
var thisMonthsInterest = (principal-equity)*interest;
equity += (monthly - thisMonthsInterest); // 得到资产额
g.lineTo(paymentToX(p),amountToY(equity)); // 将数据绘制到画布上
}
g.lineTo(paymentToX(payments), amountToY(0)); // 将数据线绘制至X轴
g.closePath(); // 将线条结尾连接至线条开头
g.fillStyle = "#78E682"; // 使用绿色绘制图形
g.fill(); // 曲线之下的部分均填充
g.fillText("贷款数额", 60,20); // 文本颜色设置为绿色

// 余额,再次循环,余额数据显示为黑色粗线条
var bal = principal;
g.beginPath();
g.moveTo(paymentToX(0),amountToY(bal));
for(var p = 1; p <= payments; p++) {
var thisMonthsInterest = bal*interest;
bal -= (monthly - thisMonthsInterest); // 得到资产额
g.lineTo(paymentToX(p),amountToY(bal)); // 将直线连接至某点
}
g.lineWidth = 2; // 将直线宽度加粗
g.strokeStyle = "#E422CB"; // 绘制线条的颜色
g.stroke(); // 绘制余额的曲线
g.fillStyle = "black"; // 使用黑色字体
g.fillText("贷款余额", 120,20); // 图例文字

// 将年度数据在X轴做标记
g.textAlign="center"; // 文字居中对齐
var y = amountToY(0); // Y坐标设为0
for(var year=1; year*12 <= payments; year++) { // 遍历每年
var x = paymentToX(year*12); // 计算标记位置
g.fillRect(x-0.5,y-3,1,3); // 开始绘制标记
if (year == 1) g.fillText("1年", x, y-5); // 在坐标轴做标记
if (year % 5 == 0 && year*12 !== payments) // 每5年的数据
g.fillText(String(year)+"年", x, y-5);
}

// 将赔付数额标记在右边界
g.textAlign = "right"; // 文字右对齐
g.textBaseline = "middle"; // 文字垂直居中
var ticks = [monthly*payments, principal]; // 我们将要用到的两个点
var rightEdge = paymentToX(payments); // 设置X坐标
for(var i = 0; i < ticks.length; i++) { // 对每两个点做循环
var y = amountToY(ticks[i]); // 计算每个标记的Y坐标
g.fillRect(rightEdge-3, y-0.5, 5,1); // 绘制标记
g.fillText(String(ticks[i].toFixed(0)),rightEdge-5, y); // 绘制文本
}
g.textAlign = "left";
g.fillRect(0, y-0.5, 6,1); // 绘制标记
g.fillText(String(principal),15, y); // 绘制文本
}
</script>
</body>
</html>

View Code

 

==

==