銀行利息計算公式推導（存款，貸款）

銀行利息怎么算？

我們不能籠統的說利息如何計算，利息計算可分為存款和貸款。而存款又分：活期，定期(三個月，半年，一年，三年，五年)等，貸款又分為：一次性償還，分期償還(等額本息，等額本金)，說這些只是告訴你利息不可一概而論；我們先看看關於利率方面的介紹。

介紹：

1. 算含蓄存款利息的基本規定：各種儲蓄存款的存期一律按對年、對月、對日計算；不論大月、小月、平月或閏月，每月均按30天計算，全年按360天計算；足一個月的零頭天數，按實際天數計算。計算存期采用算頭不算尾的辦法，即從存入的當天一直算到支取目的前一天為止。利隨本清，不計復利。除活期儲蓄存款未清戶按年度結息外，其余各種儲蓄存款，不論存期多長，一律利隨本清，不計復利。自動轉存的存款，視同到期辦理，利息可並入本金。
    
2. 銀行利息怎么算計息起點和尾數： 計息起點和尾數處理的規定。計息起點為元位，元以下角分位不計利息。利息金額算至分位，分位以下四舍五入。凡需分段計息的，每段計算應先保留至厘位，各段利息相加得出利息總額，再將分位以下的厘位四舍五入。
    
3. 銀行利息怎么算利息單位：利息單位及其換算。年利率按本金的百分之幾表示（％），月利率按本金的千分之幾表示（‰），日利率按本金的萬分之幾表示。其換算公式為：年利率＝月利率×12 ；月利率＝日利率×30 ；年利率＝日利率×360

介紹參考出處：http://jingyan.baidu.com/article/d45ad148f5bdec69552b80b8.html

一、存款利息

我們先來說說存款利息是如何計算的！

根據上面的介紹，我們可以知道利息是按每一期的利率算的，而利率又分日利率、月利率、年利率；而算法公式都是一樣的。所以剩下的你就按照公式套就可以了。

我們先來推導一下計算公式；先來設置幾個常數，為便於公式的推導計算，所取數字都是簡單計算的數字;

每期的利率是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年最多，但兩年中本金不能動，三個月利息最少，你可以每個三個月動一次本金。

例子參考出處：http://zhidao.baidu.com/question/157946384.html

再舉個例子：

假如現在的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年的定期存款，不僅要忍受流動資金減少帶來的不便，還會使存款面臨加息導致的相對貶值的風險，到時候提也不是不提也不是！所以具體怎么存法還要看當前的政策形勢！ 

例子參考出處：http://jingyan.baidu.com/article/cbcede07d7c1c702f50b4d43.html

二、貸款利息

貸款利息的計算又不太一樣，因為不同的還款方式公式也不相同，銀行貸款利息,一般是按月復利計算的,分期還款方式有：短期一次性還本付息,等額本息,等額本金.

一次性還本息的計算公式：= 本金×(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://www.cnblogs.com/sunzhenchao/archive/2013/01/14/2859727.html

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

========

<!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>

 

==

==