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 = 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)

            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='".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图像显示代码的更多相关文章

javascript基础修炼(12)——手把手教你造一个简易的require.js
目录一. 概述二. require.js 2.1 基本用法 2.2 细说API设计三. 造轮子 3.1 模块加载执行的步骤 3.2 代码框架 3.3 关键函数的代码实现示例代码托管在我的代码仓 ...
前端 JavaScript 实现一个简易计算器
前端使用 JavaScript 实现一个简易计算器,没有难度,但是里面有些小知识还是需要注意的,算是一次基础知识回顾吧. 题目实现一个简易版的计算器,需求如下: 1.除法操作时,如果被除数为0,则结 ...
iOS:制作一个简易的计算器
初步接触视图,制作了一个简易的计算器,基本上简单的计算是没有问题的,不是很完美,可能还有一些bug,再接再厉. // // ViewController.m // 计算器 // // Created ...
用JavaScript写一个简单的计算器
本文使用js实现了一个简单的加.减.乘.除计算器. 以下是css部分代码: *{ padding:0; margin:0; color: #424242; } .outer{ width:300px; ...
应用JavaScript搭建一个简易页面图片无缝滚动效果
页面图片无缝滚动JavaScript原理:移动的区块包含图片内容,区块相对父级元素进行定位脱离文档流.再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...
python 正则的使用 —— 编写一个简易的计算器
在 Alex 的博客上看到的对正则这一章节作业是编写一个计算器,要求能计算出下面的算式. 1 - 2 * ( (60-30 +(-40/5) * (9-2*5/3 + 7 /3*99/4*2998 + ...
DI 原理解析并实现一个简易版 DI 容器
本文基于自身理解进行输出,目的在于交流学习,如有不对,还望各位看官指出. DI DI-Dependency Injection,即"依赖注入":对象之间依赖关系由容器在运行期决定, ...
SpringMVC学习系列-后记结合SpringMVC和Hibernate-validator，根据后台验证规则自动生成前台的js验证代码
在SpringMVC学习系列(6) 之数据验证中我们已经学习了如何结合Hibernate-validator进行后台的数据合法性验证,但是通常来说后台验证只是第二道保险,为了更好的用户体验会现在前端 ...
JS实现一个简单的计算器
使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择 ...

随机推荐

HTMLTestRunner测试报告美化
前言最近小伙伴们在学玩python,,看着那HTMLTestRunner生成的测试报告,左右看不顺眼,终觉得太丑.搜索了一圈没有找到合适的美化报告,于是忍不住自已动手进行了修改,因习惯python ...
堆结构的优秀实现类----PriorityQueue优先队列
之前的文章中,我们有介绍过动态数组ArrayList,双向队列LinkedList,键值对集合HashMap,树集TreeMap.他们都各自有各自的优点,ArrayList动态扩容,数组实现查询非常快 ...
第一天上午——HTML网页基础知识以及相关内容
今天上午学习了HTML基础知识以及相关内容,还有DW的基本使用方法. HTML(HyperText Markup Language):超文本标记语言,超文本:网页中除了包含文本文字之外,还包含了图片, ...
javacpp-opencv图像处理3：使用opencv原生方法遍历摄像头设备及调用(增加实时帧率计算方法)
javaCV图像处理系列: javaCV图像处理之1:实时视频添加文字水印并截取视频图像保存成图片,实现文字水印的字体.位置.大小.粗度.翻转.平滑等操作 javaCV图像处理之2:实时视频添加图片水 ...
Spring学习（20）--- Schema-based AOP(基于配置的AOP实现) -- 配置切入点pointcut
pointcut(切断点)表达式: execution(public * *(..)) execution(* set*(..)) execution(* com.xyz.service.Accoun ...
javascriptDOM节点
DOM把层次中的每一个对象都称之为节点(NODE),以HTML超文本标记语言为例:整个文档的一个根就是<html>,在DOM中可以使用 document.documentElement来访 ...
Elasticsearch文档查询
简单数据集到目前为止,已经了解了基本知识,现在我们尝试用更逼真的数据集,这儿已经准备好了一份虚构的JSON,关于客户银行账户信息的.每个文档的结构如下: { , , "firstname& ...
Ubuntu下录音机程序的使用
在Ubuntu中使用系统自带的录音机程序可以录制电脑的音频输出(比如,电脑正在播放视频的声音),或录制外部环境音频输入(比如,自己说话的声音) 1.录制电脑音频输出在“硬件”选项中,将”选中设备的设 ...
Linux find运行机制详解
本文目录: 1.1 find基本用法示例 1.2 find理论部分 1.2.1 expression-operators 1.2.2 expression-options 1.2.3 expressi ...
深入理解 JavaScript 事件循环（二）— task and microtask
引言 microtask 这一名词是 JS 中比较新的概念,几乎所有人都是在学习 ES6 的 Promise 时才接触这一新概念,我也不例外.当我刚开始学习 Promise 的时候,对其中回调函数的执 ...

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

javascript的一个简易利率计算器+js图像显示 代码的更多相关文章

随机推荐

热门专题

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

javascript的一个简易利率计算器+js图像显示代码的更多相关文章