一个简单的税利计算器(网页版)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一个简单的税利计算器(网页版)相关的知识,希望对你有一定的参考价值。

         嗯嗯,做一个简单的网页版的税率计算器,功能比较简单,但是相对比较实用。因为参考了一些其他作品,所以在计算汇率的时候习惯性的是以美元做单位。具体的功能有着较为详细的标注。仅供大家学习参考下。

<!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中引用了不少算法,如果阅读起来有些困难,请先从基本的数学计算开始看起。

以上是关于一个简单的税利计算器(网页版)的主要内容,如果未能解决你的问题,请参考以下文章

用JavaScript实现一个简单的网页版计算器

用JavaScript实现一个简单的网页版计算器

用JavaScript实现一个简单的网页版计算器

ORACLE的安装与网页版创建表空间的简单操作以及PLsql的简单操作

炫酷 CSS 背景效果的 10 个代码片段

[vscode]--HTML代码片段(基础版,reactvuejquery)