首页 > 代码库 > javascript的一个简易利率计算器+js图像显示 代码

javascript的一个简易利率计算器+js图像显示 代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS弹框</title>
    <style type="text/css">
        .output{font-weight: bold;}
        #payment{text-decoration: underline;}
        #graph{border: solid black 1px;}
        th,td{vertical-align: top;}
    </style>
</head>
<body>
    <table >
        <tr><th>输入数据:</th>
            <td></td>
        </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>数据压缩:</td>
            <td><input id="zipcode" onchange="calculate()" ></td>
        </tr>
        <tr>
            <td>计算汇率:</td>
            <td><button onclick="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>total interst:</td>
            <td><span class="output" id="totalinterest"></span></td>
        </tr>
        <tr>
            <th>Sponsors:</th>
            <td colspan="2">生成你的利率:
                <div id="lenders"></div>
            </td>
        </tr>
    </table>
<script type="text/javascript">
    "use strict";//如果浏览器支持的话,则开启ECMAScript5 的严格模式
    /**
     * 这里的脚本定义了caculate()函数,在HTML代码只能怪绑定时间处理程序时会调用它
     * 这个函数从<input>元素中读取数据,计算贷款赔付信息,并将结果显示在<span>元素中
     * 同样,这里还保存了用户数据、展示了房贷人链接并绘制了图表
     */
    function calculate() {
        //查找文档中用户输入输出的元素
        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);

        /**
         * 如果结果没有超过JavaScript能表示的数字范围,且用户输入也正确
         * 这里所展示的结果就是合法的
         */
        if(isFinite(monthly)){
            //将数据填充至输出字段的位置,四舍五入到小数点后两位数字
            payment.innerHTML=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 =http://www.mamicode.com/ localStorage.loan_amount;
            document.getElementById(‘apr‘).value =http://www.mamicode.com/ localStorage.loan_apr;
            document.getElementById(‘years‘).value =http://www.mamicode.com/ localStorage.loan_years;
            document.getElementById(‘zipcode‘).value =http://www.mamicode.com/ localStorage.loan_zipcode;
        }
    };

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

        //将用户的输入数据进行URL编码,并作为查询参数附加在URL中
        var url = "getLenders.php"+                //处理数据的URL地址
            "?amt="+encodenURIComponent(amount)+ //使用查询串中的数据
            ‘&apr=‘+encodenURIComponent(apr)+
            ‘&yrs=‘+encodenURIComponent(years)+
            ‘&zip=‘+encodenURIComponent(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=http://www.mamicode.com/‘".lenders[i].url+"‘>"+lenders[i].name+"</a>";
                }

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

    /**
     * 在HTML<canvas>元素中用图表展示月度贷款余额、利息和资产收益
     * 如果不传入参数的话,则清空之前的图表数据
     */
    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;
        var height = graph.height;    //获得画布大小

        //这里的函数作用是将付款的数字和美元数据转换为像素
        function paymentToX(n){
            return n*width/payments;
        }

        function amountToY(a){
            return height-(a*height/(monthly*payments*1.05));
        }
        console.log(payments);

        //付款数据是一条从(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 interest Payments",20,20);//将文字绘制到图例中

        //很多资产数据并不是线性的,很难将其反映至图表中
        var equity = 0;
        g.beginPath();        //开始绘制新图形
        g.moveTo(paymentToX(0),amountToY(0));//从左下方开始
        for(var p=1; p<=payments; p++){    
            //计算出每一笔赔付利息
            var thisMontsInterest = (principal-equity)*interest;
            equity+=(monthly-thisMontsInterest);         //得到资产额
            g.lineTo(paymentToX(p),amountToY(equity));    //将数据绘制到画布上
        }

        g.lineTo(paymentToX(payments),amountToY(0));
        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 thisMonthsInterest = bal*interest;
            bal -= (monthly-thisMontsInterest);     //得到资产额
            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);                //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("Year",x,y-5);                //在坐标轴做标记
            if(year%5==0&&year*12!==payments)
                g.fillText(String(year),x,y-5);                //每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,3,1);            //绘制标记
            g.fillText(String(ticks[i].toFixed(0)),rightEdge-5,y);//绘制文本
        }
}
</script>
</body>
</html>

javascript的一个简易利率计算器+js图像显示 代码