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上看这本 ...
随机推荐
- 【摘录】某表含有N个字段超精简模糊查询方法
SELECT * FROM table where CONCAT(a,b,c......) like '%key%' select name from syscolumns where id=obj ...
- git创建仓库
创建仓库 git init: Git 使用 git init 命令来初始化一个 Git 仓库,Git 的很多命令都需要在 Git 的仓库中运行,所以 git init 是使用 Git 的第一个命令. ...
- js中用正则表达式 过滤特殊字符 ,校验所有输入域是否含有特殊符号
function stripscript(s) { var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~ ...
- MySQL定时器开启、调用实现代码
创建测试表 CREATE TABLE t ( v ) NOT NULL ) ENGINE INNODB DEFAULT CHARSET=utf8; 创建定时器 调用的存储过程 DELIMITER ...
- Jquery-pagination.js分页处理
首先提供pagination.js的插件源码 /** * This jQuery plugin displays pagination links inside the selected elemen ...
- 让Chrome支持Ajax/$http方式读取本地文件
在开发中经常写些小demo调试一下插件什么的 数据源又经常手动构造分离为一个单独的文件.用ajax或$http去访问时总是拒绝访问.这个时候可以给Chrome的快捷图标加启动参数,让浏览器允许js访问 ...
- Http 和TCP的关系，TCP长连接和短连接有什么区别？
HTTP 协议即超文本传送协议(Hypertext Transfer Protocol ),是Web联网的基础,也是手机联网常用的协议之一,HTTP协议是建立在TCP协议之上的一种应用.由于HTTP在 ...
- bash中不可以用字符串做数组下标
bash中可以用字符串做数组下标吗例如 test["abc"]=1------解决方案-------------------- 好像是误会,是awk里可以,bash shell里不 ...
- 【POJ 2406】Power Strings（KMP循环节）
终于靠着理解写出KMP了,两种KMP要代码中这种才能求循环节.i-next[i]就是循环节. #include<cstdio> #define N 1000005 char s[N]; i ...
- iOS获取流量参考
通过读取系统网络接口信息,获取当前iphone设备的流量相关信息,统计的是上次开机至今的流量信息. 2 倒入库: SystemConfiguration.framework 加入头文件: #inclu ...