示例：javascript贷款计算器

　　相关技术：

　　　　1、如何在文档中查找元素；

　　　　2、如何通过表单input元素来获取用户的输入数据；

　　　　3、如何通过文档元素来设置HTML内容；

　　　　4、如何将数据存储在浏览器中；

　　　　5、如何使用脚本发起HTTP请求；

　　　　6、如何利用<canvas>元素绘图。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>Javascript Loan Calculator</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>Enter Loan Data:</th>

        <td></td>

        <th>Loan Balance, Cumulative Equity, and Interest Payments</th>

    </tr>

    <tr>

        <td>Amount of the loan ($):</td>

        <td><input id="amount" onchange="calculate();"/></td>

        <td rowspan="8">

            <canvas id="graph" width="400" height="250"></canvas>

        </td>

    </tr>

    <tr>

        <td>Annual interest (%):</td>

        <td><input id="apr" onchange="calculate();"/></td>

    </tr>

    <tr>

        <td>Repayment period (years):</td>

        <td><input id="years" onchange="calculate();"/></td>

    </tr>

    <tr>

        <td>Zipcode (to find lenders):</td>

        <td><input id="zipcode" onchange="calculate();"/></td>

    </tr>

    <tr>

        <th>Approximate Payments:</th>

        <td>

            <button onclick="calculate();">Calculate</button>

        </td>

    </tr>

    <tr>

        <td>Monthly payment:</td>

        <td>$<span class="output" id="payment"></span></td>

    </tr>

    <tr>

        <td>Total payment:</td>

        <td>$<span class="output" id="total"></span></td>

    </tr>

    <tr>

        <td>Total interest (%):</td>

        <td>$<span class="output" id="totalinterest"></span></td>

    </tr>

    <tr>

        <th>Sponsors:</th>

        <td colspan="2">Apply for your loan with one of these fine lenders:

            <div id="lenders"></div>

        </td>

    </tr>

</table>

<script type="text/javascript">

    "use strict";//如果浏览器支持的话，开启ECMAScript 5的严格模式

    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 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");

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

        var monthly = (principal * x * interest) / (x - 1);

        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();//清空图表

        }

    }

    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;

        }

    }

    function getLenders(amount, apr, years, zipcode) {

        //如果浏览器不支持XMLHttpRequest对象，则退出

        if (!window.XMLHttpRequest) {

            return;

        }

        var ad = document.getElementById("lenders");

        if (!ad) {

            return;

        }

        var url = "getLenders.php" + "?amt=" + encodeURIComponent(amount) + "&apr=" + encodeURIComponent(apr) +

                "&yrs=" + encodeURIComponent(years) + "&zip=" + encodeURIComponent(zipcode);

        var req = new XMLHttpRequest();

        req.open("GET", url);

        req.send(null);

        req.onreadystatechange = function () {

            if (req.readyState == 4 && req.status == 200) {

                var response = req.responseText;

                var lenders = JSON.parse(response);

                var list = "";

                for (var i = 0; i < lenders.length; i++) {

                    list += "<li><a href='" + lenders[i].url + "'>" + lenders[i].name + "</a></li>";

                }

                ad.innerHTML = "<ul>" + list + "</ul>"

            }

        };

    }

    function chart(principal, interest, monthly, payments) {

        var graph = document.getElementById("graph");

        graph.width = graph.width;//巧妙手法清除并重置画布

        if (arguments.length == 0 || !graph.getContext) {

            //不传入参数，或浏览器不支持画布，直接返回

            return;

        }

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

        }

        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 thisMonthsInterest = (principal - equity) * interest;

            equity += (monthly - thisMonthsInterest);

            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 - thisMonthsInterest);

            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];

        var rightEdge = paymentToX(payments);

        for (var i = 0; i < ticks.length; i++) {

            var y = amountToY(ticks[i]);

            g.fillRect(rightEdge - 3, y - 0.5, 3, 1);

            g.fillText(String(ticks[i].toFixed(0)), rightEdge - 5, y);

        }

    }

</script>

</body>

</html>

贷款计算器

Javascript权威指南——第一章Javascript概述的更多相关文章

  1. PADSPCB权威指南-第一章 PADS软件系统（部分）（原创）

    PADSPCB权威指南-第一章(部分)豆丁地址:http://www.docin.com/p-707128286.html

  2. 【笔记】javascript权威指南-第二章-词法结构

    词法结构 //本书是指:javascript权威指南    //以下内容摘记时间为:2013.7.28   字符集 UTF-8和UTF-16的区别?Unicode和UTF是什么关系?Unicode转义 ...

  3. Javascript权威指南——第二章词法结构，第三章类型、值和变量，第四章表达式和运算符，第五章语句

    第二章 词法结构 一.HTML并不区分大小写(尽管XHTML区分大小写),而javascript区分大小写:在HTML中,这些标签和属性名可以使用大写也可以使用小写,而在javascript中必须小写 ...

  4. JavaScript权威指南 第二章 词法结构

    这章主要把保留字说一下 JavaScript 把一些标识符拿出来用做自己的关键字.因此,就不能再在程序中把这些关键字用做标识符了: break delete function return typeo ...

  5. Kubernetes权威指南 第一章：Kubernetes入门

    Kubernetes是什么 官网 https://kubernetes.io/ 中文版:https://kubernetes.io/zh/ Kubernetes是谷歌十几年大规模容器管理经验的成果 是 ...

  6. JavaScript 权威指南-学习笔记（一）

    本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! ## JavaScript 权威指南-学 ...

  7. 【JavaScript权威指南(第五版)】笔记之第一部分 核心javascript (第1章~第12章)

    第一章 javascript概述 ①.javascript是一种松散类型语言;也是一种解释型语言;         第二章 词法结构 ①.大小写敏感         第三章 数据类型和值 ①.isFi ...

  8. JavaScript权威指南读书笔记【第一章】

    第一章 JavaScript概述 前端三大技能: HTML: 描述网页内容 CSS: 描述网页样式 JavaScript: 描述网页行为 特点:动态.弱类型.适合面向对象和函数式编程的风格 语法源自J ...

  9. 《javascript权威指南》读书笔记——第一篇

    <javascript权威指南>读书笔记——第一篇 金刚 javascript js javascript权威指南 由于最近想系统学习下javascript,所以开始在kindle上看这本 ...

随机推荐

  1. Ubuntu 14.04 安装最新稳定版Nginx 1.6.0

    如果已经安装,请先卸载sudo apt-get remove nginx最新的稳定版Nginx 1.6.0在ubuntuupdates ppa库中提供,网址http://www.ubuntuupdat ...

  2. Dubbo_创建Dubbo服务并在ZooKeeper注册，然后通过Jar包执行

    一.安装ZooKeeper(略) 二.创建Dubbo服务  1.DemoService 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...

  3. C#-面向对象——如何调用使用类 普通方法、静态方法的使用

    类的调用使用 新建的类的命名空间与主函数的命名空间默认相同,如果不同,则主函数无法调用自定义类 比如: 只需要进行引用即可 如果不知道方法的类名,可以右键鼠标 → 解析 → using 即可 普通方法 ...

  4. BuiltWith

    BuiltWith网站技术信息查询工具 利用该网站所提供的功能,你可以查询出某网站背后是由哪些技术来支持的, 比如操作系统的类型.所采用的访问量统计服务.采用的发布平台.广告平台.语言框架.聚合功能. ...

  5. bzoj4381: [POI2015]Odwiedziny

    这题搞了我一下午……因为一些傻X的问题…… 对于步长大于sqrt(n)的询问,我们可以直接暴力求解 然后,我们可以事先预处理出d[u][step]表示u往上跳,每次跳step步,直到跳到不能跳为止,所 ...

  6. AngularJs学习之一使用自定义的过滤器

    script: 参数item是由AngularJs提供的,是应当被过滤的对象集合.而showComplete是我们传入的参数. {{item.action}} 用ng-model创造一个名为showC ...

  7. Java多线程与并发库高级应用-传统定时器技术回顾

    传统定时器技术回顾(jdk1.5以前) public class TraditionalTimerTest { static int count = 0; public static void mai ...

  8. BZOJ 4325: NOIP2015 斗地主

    4325: NOIP2015 斗地主 Time Limit: 30 Sec  Memory Limit: 1024 MBSubmit: 684  Solved: 456[Submit][Status] ...

  9. Leetcode Integer Replacement

    Given a positive integer n and you can do operations as follow: If n is even, replace n with n/2. If ...

  10. MapReduce设置输出分隔符

    conf.set("mapred.textoutputformat.ignoreseparator","true"); conf.set("mapre ...