一個簡單的稅利計算器（網頁版）

時間 2019-11-11
標籤一個簡單稅利計算器網頁欄目 HTML 简体版
原文原文鏈接
嗯嗯，作一個簡單的網頁版的稅率計算器，功能比較簡單，可是相對比較實用。由於參考了一些其餘做品，因此在計算匯率的時候習慣性的是以美圓作單位。具體的功能有着較爲詳細的標註。僅供你們學習參考下。php
<!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>