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

  1. javascript基础修炼(12)——手把手教你造一个简易的require.js

    目录 一. 概述 二. require.js 2.1 基本用法 2.2 细说API设计 三. 造轮子 3.1 模块加载执行的步骤 3.2 代码框架 3.3 关键函数的代码实现 示例代码托管在我的代码仓 ...

  2. 前端 JavaScript 实现一个简易计算器

    前端使用 JavaScript 实现一个简易计算器,没有难度,但是里面有些小知识还是需要注意的,算是一次基础知识回顾吧. 题目 实现一个简易版的计算器,需求如下: 1.除法操作时,如果被除数为0,则结 ...

  3. iOS:制作一个简易的计算器

    初步接触视图,制作了一个简易的计算器,基本上简单的计算是没有问题的,不是很完美,可能还有一些bug,再接再厉. // // ViewController.m // 计算器 // // Created ...

  4. 用JavaScript写一个简单的计算器

    本文使用js实现了一个简单的加.减.乘.除计算器. 以下是css部分代码: *{ padding:0; margin:0; color: #424242; } .outer{ width:300px; ...

  5. 应用JavaScript搭建一个简易页面图片无缝滚动效果

    页面图片无缝滚动JavaScript原理:移动的区块包含图片内容,区块相对父级元素进行定位脱离文档流.再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...

  6. python 正则的使用 —— 编写一个简易的计算器

    在 Alex 的博客上看到的对正则这一章节作业是编写一个计算器,要求能计算出下面的算式. 1 - 2 * ( (60-30 +(-40/5) * (9-2*5/3 + 7 /3*99/4*2998 + ...

  7. DI 原理解析 并实现一个简易版 DI 容器

    本文基于自身理解进行输出,目的在于交流学习,如有不对,还望各位看官指出. DI DI-Dependency Injection,即"依赖注入":对象之间依赖关系由容器在运行期决定, ...

  8. SpringMVC学习系列-后记 结合SpringMVC和Hibernate-validator，根据后台验证规则自动生成前台的js验证代码

    在SpringMVC学习系列(6) 之 数据验证中我们已经学习了如何结合Hibernate-validator进行后台的数据合法性验证,但是通常来说后台验证只是第二道保险,为了更好的用户体验会现在前端 ...

  9. JS实现一个简单的计算器

    使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择 ...

随机推荐

  1. R语言的导数计算（转）

    转自:http://blog.fens.me/r-math-derivative/ 前言 高等数学是每个大学生都要学习的一门数学基础课,同时也可能是考完试后最容易忘记的一门知识.我在学习高数的时候绞尽 ...

  2. NetBeans+Xdebug调试php代码

    本文目录 : Xdebug的工作原理 Xdebug扩展的配置 NetBeans的配置 调试实例 本文小结 参考文档 Xdebug:是PHP的调试器和分析器(Debugger and Profiler ...

  3. 用超链接传递数组或get方式

    <?php /** * 超链接传递数组参数 */ if($_GET['names']){ $arr=explode('-',$_GET['names']);//将数组分割为字符串 print_r ...

  4. Spring+SpringMVc+Mybatis实现数据库查询

    大家好,本篇博客小Y将会给大家带来一篇SSM框架实现数据查询的Demo,使用的数据库是Mysql,Server是TomCat.现在的SSM整合非常流行,因为springmvc的高效和mybatis的灵 ...

  5. js编写简单的贪吃蛇游戏

    css代码 *{ margin:; padding:; } td{ width: 4px; height: 4px; background: #ccc; border: 2px solid #ccc; ...

  6. windows embedded compact 2013 正版免费下载

    不知道wince2013是不是真的免费了,不过可以试一下! 下载地址:http://www.microsoft.com/en-us/download/details.aspx?id=39268 你仍然 ...

  7. Webpack 开发工具与模块热替换

    Webpack 开发工具与模块热替换 ​⚠️ 注意: 永远不要在生产环境中使用这些工具,永远不要. devtool 当 JavaScript 异常抛出时,你常会想知道这个错误发生在哪个文件的哪一行.然 ...

  8. Vue-cli 记录

    出自http://www.cnblogs.com/nutritious/p/6494479.html 先给出能正确安装的步骤: 1.进盘符 2,为啥不用npm,这是国外的东西,有些电脑无法FQ,会导致 ...

  9. Array.apply(null,{length:20})与new Array(20)的区别

    Array.apply(null,{length:20}) 这句代码的实际意义:创建长度为20的一个数组,但并非空数组. 跟new Array(20)的区别在于,前一种创建方式,得到的数组中的每一个元 ...

  10. object覆盖的div解决办法

    最近做个web项目,因为里面有个<object>的插件,弹出<div>对话框会被其遮盖,我做了个<iframe>标签,在弹框时,把<object>覆盖掉 ...