Javascript权威指南——第一章Javascript概述

示例：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概述的更多相关文章

PADSPCB权威指南-第一章 PADS软件系统（部分）（原创）
PADSPCB权威指南-第一章(部分)豆丁地址:http://www.docin.com/p-707128286.html
【笔记】javascript权威指南-第二章-词法结构
词法结构 //本书是指:javascript权威指南 //以下内容摘记时间为:2013.7.28 字符集 UTF-8和UTF-16的区别?Unicode和UTF是什么关系?Unicode转义 ...
Javascript权威指南——第二章词法结构，第三章类型、值和变量，第四章表达式和运算符，第五章语句
第二章词法结构一.HTML并不区分大小写(尽管XHTML区分大小写),而javascript区分大小写:在HTML中,这些标签和属性名可以使用大写也可以使用小写,而在javascript中必须小写 ...
JavaScript权威指南第二章词法结构
这章主要把保留字说一下 JavaScript 把一些标识符拿出来用做自己的关键字.因此,就不能再在程序中把这些关键字用做标识符了: break delete function return typeo ...
Kubernetes权威指南第一章：Kubernetes入门
Kubernetes是什么官网 https://kubernetes.io/ 中文版:https://kubernetes.io/zh/ Kubernetes是谷歌十几年大规模容器管理经验的成果是 ...
JavaScript 权威指南-学习笔记（一）
本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! ## JavaScript 权威指南-学 ...
【JavaScript权威指南(第五版)】笔记之第一部分核心javascript (第1章~第12章)
第一章 javascript概述 ①.javascript是一种松散类型语言;也是一种解释型语言; 第二章词法结构 ①.大小写敏感第三章数据类型和值 ①.isFi ...
JavaScript权威指南读书笔记【第一章】
第一章 JavaScript概述前端三大技能: HTML: 描述网页内容 CSS: 描述网页样式 JavaScript: 描述网页行为特点:动态.弱类型.适合面向对象和函数式编程的风格语法源自J ...
《javascript权威指南》读书笔记——第一篇
<javascript权威指南>读书笔记——第一篇金刚 javascript js javascript权威指南由于最近想系统学习下javascript,所以开始在kindle上看这本 ...

随机推荐

模块加载(require)及定义(define)时的路径
最近新公司在用requireJS进行JS的整合,刚开始接触有点蒙,于是深入了解了一下.requireJS主要是为了解决一下两个问题: (1)实现js文件的异步加载,避免网页失去响应: (2)管理模块之 ...
给li设置float浮动属性之后，无法撑开外层ul的问题。（原址：http://www.cnblogs.com/cielzhao/p/5781462.html）
最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...
A+B
Problem Description Calculate A + B. Input Each line will contain two integers A and B. Process to e ...
elasticsearch installation guide
UBUNTU 14.04 LTS 安装 elasticseach同步MYSQL表并实现中文搜索 ==================================================== ...
android textview改变部分文字的颜色和string.xml中文字的替换（转）
转 :http://blog.csdn.net/ljz2009y/article/details/23878669 一:TextView组件改变部分文字的颜色: TextView textView ...
jar-下载站点
nutch: http://archive.apache.org/dist/nutch/ jarfire: http://cn.jarfire.org/ solr: http://archive.ap ...
【USACO 2.1】Healthy Holsteins
/* TASK: holstein LANG: C++ URL: http://train.usaco.org/usacoprob2?a=SgkbOSkonr2&S=holstein SOLV ...
数据结构之二分查找（PHP)
<?php //二分查找算法 //前提:索引数组.数组已排好顺序 $a=array(1,3,4,6,8,9,11,13,15,24,25,27,30,38); $search = 30;//要查 ...
Java多线程与并发库高级应用-传统线程机制回顾
1.传统线程机制的回顾 1.1创建线程的两种传统方式在Thread子类覆盖的run方法中编写运行代码 // 1.使用子类,把代码放到子类的run()中运行 Thread thread = new T ...
自动完成--autoComplete插件(2)
远端的也可以成为本地的数据 4) lookupLimit 类型:数字说明:本地数据显示的最大条数,服务器段的没有效果,服务器端的可以后台设置默认:没有限制 5) lookupFilter 类型: ...

Javascript权威指南——第一章Javascript概述

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

随机推荐

热门专题