<!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. 项目管理之 Git 管理软件 SourceTree for Mac

    Git 项目管理: Mac Terminal 生成 Git 秘钥流程: git config --global user.name "yourname" git config -- ...

  2. jQuery总结---版本一

    day01--- jQuery是一个函数库,简化了DOM操作,屏蔽了浏览器兼容性问题.函数分为4类 (1)DOM操作 (2)事件处理 (3)动画 (4)AJAX jQuery3的新特性有哪些? 1. ...

  3. Java之FilenameFilter接口

    FilenameFilter接口:是用于过滤文件的 要实现的是accept方法 实例代码: 1,匿名类实现FilenameFilter-–过滤指定类型文件 package File类过滤器; impo ...

  4. Python成长之路 — 字典

    一.字典的定义与创建 字典是Python中唯一内建的映射类型.你可以将其想象成书本的目录,章节名称代表"key",页码则代表"value".书本的目录本质上是也 ...

  5. 在Intellij Idea中使用JSTL标签库

    习惯了eclipse和myeclipse开发的我们总是依赖于系统的插件,而当我想当然的以为IntelliJ IDEA 的jstl 的使用应该和myeclispe一样,当时使用起来却到处碰壁,完全找不到 ...

  6. Python之正则表达式（re模块）

    本节内容 re模块介绍 使用re模块的步骤 re模块简单应用示例 关于匹配对象的说明 说说正则表达式字符串前的r前缀 re模块综合应用实例 正则表达式(Regluar Expressions)又称规则 ...

  7. 基于NIO的Netty网络框架

    Netty是一个高性能.异步事件驱动的NIO框架,它提供了对TCP.UDP和文件传输的支持,Netty的所有IO操作都是异步非阻塞的,通过Future-Listener机制,用户可以方便的主动获取或者 ...

  8. iOS 手势

    一.看这里 二.抽象类  UIGestureRecognizer 继承于该类的有7类:轻点,捏合,拖拽,滑动,长按,旋转,边缘滑动; 一个手势可以绑定多个事件  - (void)addTarget:( ...

  9. eclipse 创建maven 项目 动态web工程报错

    Eclipse 创建maven 项目 动态web工程 注:Eclipse版本为(Version: Mars.1 Release (4.5.1))maven版本为(apache-maven-3.3.9) ...

  10. 不完全翻译：Threading in C#-Getting Started

    Introduction(引入,介绍) and Concepts(概念) 原文地址:http://www.albahari.com/threading/ 注:水平有限不能全文翻译,备注了个别字段和短句 ...