嗯嗯，做一個簡單的網頁版的稅率計算器，功能比較簡單，但是相對比較實用。因為參考了一些其他作品，所以在計算匯率的時候習慣性的是以美元做單位。具體的功能有着較為詳細的標注。僅供大家學習參考下。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>JavaScript Loan Calculator</title> <style> /*這是一個css樣式列表：定義輸出程序的樣式*/ .output{ font-weight: bold; } /* 計算結果顯示為粗體*/ #payment{text-decoration: underline;} /* 定義id=“payment”的樣式 */ #graph{border:groove silver 1px;} /* 設置表格的邊框樣式*/ th, td{vertical-align: top;} /* 表格單元格頂端對齊方式向上對齊*/ table{ margin:50px auto; border:groove grey 1px;background:rgba(0,0,0,0.2);} </style> </head> <body> <!--這是一個html表格，其中包含<input>元素可以用來輸入數據 程序將在<span>元素中顯示計算結果，這些元素都有類似“insert”和“year”的id 這些id將在表格下面的JavaScript代碼中用到。我們注意到，有一些 input元素定義了“onchange”或“onclick”的事件處理程序，以便用戶在輸入數據或或者點擊inputs時 執行指定的JavaScript代碼段--> <table> <tr><th>輸入貸款數據:</th> <td></td><th>Loan Balance,Cumulative Equity, and Insert Payments</th> </tr> <tr><td>貸款金額($):</td> <td><input id="amount" onchange="calculate();"></td> <td rowspan="8"><canvas id="graph" width="400" height="250"></canvas></td></tr> <tr><td>年利率(%):</td> <td><input id="apr" onchange="calculate();"></td></tr> <tr><td>償還期限(年):</td> <td><input id="years" onchange="calculate();"></td></tr> <tr><td>郵政編碼(to find lenders :)</td> <td><input id="zipcode" onchange="calculate();"></td></tr> <tr><td>近似支付:</td> <td><button onclick="calculate();">Calculate</button></td></tr> <tr><td>按月支付:</td> <td>$<span class="output" id="payment"></span></td></tr> <tr><td>總付款:</td> <td>$<span class="output" id="total"></span></td></tr> <tr><td>總利息:</td> <td>$<span class="output" id="totalintersert"></span></td></tr> <tr><th>贊助商:</th> <td colspan="2">Apply for your loan with one of these fine lenders: <div id="lender"></div></td></tr> </table> <script> function calculate(){ //通過獲取id查找文檔中用於輸出的元素 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 totalinsert=document.getElementById("totalinsert"); //假設所有的輸入都是合法的，將從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); //如果數字沒有超過JavaScript表示的數字范圍，而且用戶輸入的也正確 //這里所展示的結果就是合法的 if(isFinite(monthly)){ //將數據填充只輸出字段的位置，四舍五入到小數點后兩位 payment.innerHTML=monthly.toFixed(2); //將用戶的輸入數據保存下來，這樣在下次訪問時也能取到數據 save(amount.value, apr.value, years.value, zipcode.value); //找到並展示本地放貸人，但忽略網絡錯誤 try{//捕獲這段代碼拋出的異常 getListener(amount.value, apr.value, years.value , zipcode.value); }catch(e){/*忽略這些異常*/} //最后，用圖表展示貸款余額，利息和資產收益、 chart(principal,interest,monthly,payments); }else{ //計算結果不是數字或者無窮大，意味着輸的的數據是非法的或者是不完整的 //晴空之前的數據 payment.innerHTML=""; total.innerHTML=""; totalinsert.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.local_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){ //如果瀏覽器不支持XML HTTP Ruquest對象，則退出 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); //通過XMLHTTPRuquest對象來提取返回數據 var req=new XMLHttpRequest(); //發起一個新的請求 req.open("GET",url); //通過URL發送一個get請求 req.send(null); //不帶任何正文發送這個請求 //在返回數據之前，注冊了一個事件處理函數，處理這個函數 //將會在服務器的響應返回至客戶端的時候調用 //這種異步編程模型在客戶端JavaScript中是非常常見的 req.onreadystatechange= function(){ if(req.status==200 && req.readyState==4){ //代碼運行到這里，說明我們得到了一個完整且合法的HTTP響應 var response=req.responseText; //HTTP響應是以字符串的形式呈現的 var lenders=JSON.parse(response); //將其解析為js數組 //將數組中的放貸人對象轉換為HTNL字符串形式 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>中用圖表展示月度貸款余額，利息和資產收益 //如果不傳入參數的話。則清空之前圖表的數據 function chart(principal,intersert,monthly,payments){ var graph=document.getElementById("graph"); //得到<canvas>標簽 graph.width=graph.width; //用一種巧妙的手法清除並重布置畫布 //如果不傳入參數或者瀏覽器不支持畫布，則直接返回。 if(argnames.length==0 || !graph.getContext)return; //獲得畫布元素的“context”對象，這個對象定義了一組繪畫API var g=graph.getContent("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("Total Inerest Pyanments",20,20) ; //將文字繪制到圖例中 //很多資產數據並不是線性的，很那將其反應至圖表中 var equity= 0; g.beginPath(); g.moveTo(paymentTox(0),amountToy(0)); for(var p=1; p<=payments; p++){ //計算出每一筆賠付的利息 var thisMnothsInterest=(principal-equity)*intersert; equity +=(monthly -thisMonthsInsterest); //得到資產額 g.lineTo(paymentTox(p),amountToy(equity)); //將數據繪制到畫布上 } g.lineTo(paymentTox(payments),amountToy(0)); //將數據繪制至X軸 g.closePath(); g.fillStyle="green"; g.fill(); g.fillText("Total Equity",20,35); //文本顏色設置為綠色 //再次循環，余額數據顯示為黑色粗線條 var bal=principal; g.beginPath(); g.moveTo(paymentTox(0),amountToy(bal)); for(var p=1; p<=payments;p++){ var thisMonthsInterset =ball*interest; bal-=(monthly-thisMonthsInterset); //得到資產額 g.lineTo(paymentTox(p),amountToy(bal)); //將直線連接至某點 } g.lineWidth=3; //線條加寬加粗 g.stroke(); //繪制余額的曲線 g.fillStyle="black"; g.fillText("Loan Balance",20,50); //圖例文字 //將年度數據在X軸做標記 g.textAlign="center"; var y=amountToy(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("Year",x,y-5); if(year%5==0&&year*12!==payments){ g.fillText(String(year),x,y-5); } //將賠付數額標記在右邊界 g.textAlign="right"; g.textBaseline="middle"; var ticks=[monthly*payments, principal]; for(var i=0; i<ticks.length;i++){ var y=amountToy(ticks[i]); g.fillRect(rightEde-3,y-0.5,3,1); g.fillText(String(ticks[i].toFixed(0)),rightEdge-5,y); } } } </script> </body> </html>
這個計算器樣式較為簡單，實用方便。對於這個計算器的樣式本人偷懶並沒有進行美化，有心的可以自行在style里面添加所有你所需要的樣式。
這個計算器的難點在於JavaScript中引用了不少算法，如果閱讀起來有些困難，請先從基本的數學計算開始看起。