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概述相关推荐

你是怎么看完《JavaScript权威指南》《JavaScript高级程序设计》等这类厚书的？
参考博客原址:https://www.cnblogs.com/tonykair/p/7502276.html 你是怎么看完<JavaScript权威指南><JavaScript高级程 ...
netty权威指南第一章
本章内容如下: 5种网络I/O模型的介绍 I/O多路复用的介绍 1.I/O基础入门在Java1.4之前,Java对I/O的支持不完善,开发人员在开发高性能I/O的程序时,会面临以下问题: 没有数据缓 ...
JavaScript权威指南第二章词法结构
JavaScript程序是用unicode字符集编写的. JavaScript是区分大小写的语言. HTML是不区分大小写的语言. JavaScript会忽略程序中标识(token)之间的空格. Ja ...
javascript权威指南_重读javascript权威指南(3)
第三章数据类型和值能够表示并操作的值类型成为数据类型,javascript允许使用3中基本数据类型-数字.文本字符串和布尔值,此外还有两种小数据类型null(空)和undefined(未定义),除 ...
Asterisk权威指南/第一章一场电话革命
当我们开始着手写一本Asterisk书的时候(大概五年前),我们确信Asterisk将会从根本上改变通讯行业.今天,我们预言的这场革命几乎就要完成了.Asterisk现在是世界上最成功的PBX,并且是 ...
JavaScript权威指南读书笔记——JavaScript的扩展
常量和局部变量常量声明常量需要使用关键字const,const关键爵var关键字行为非常类似,但const声明的是常量. 对常量重新赋值会失败,而对常量重新声明会报错. const pi = 3. ...
CUDA C编程权威指南第一章
基础 CUDA(Compute Unified Device Architecture)是NVIDIA提出 CPU和GPU是的PCI-Express总线相连 cpu CPU则负责管理设备端的资源; C ...
数据仓库工具箱维度建模权威指南-第一章数据仓库、商业智能及维度建模初步
数据仓库和商业智能(Data Warehousing and Business Intelligence, DW/BI),DW/BI 系统的数据结构与标识必须符合业务用户的思维过程和词汇信息两个目的 ...
《JavaScript 权威指南》犀牛书阅读详解
前言: <JavaScript 权威指南>(JavaScript:The Definitive Guide)是一本由David Flanagan所著的JavaScript领域的经典书籍,它 ...

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

Javascript权威指南——第一章Javascript概述相关推荐

最新文章

热门文章