<!DOCTYPE html>
<html>
<head>
<title>JavaScript Loan Calculator</title>
<style> /* This is a CSS style sheet: it adds style to the program output */
.output { font-weight: bold; } /* Calculated values in bold */
#payment { text-decoration: underline; } /* For element with id="payment" */
#graph { border: solid black 1px; } /* Chart has a simple border */
th, td { vertical-align: top; } /* Don't center table cells */
</style>
</head>
<body>
<!--
This is an HTML table with <input> elements that allow the user to enter data
and <span> elements in which the program can display its results.
These elements have ids like "interest" and "years". These ids are used
in the JavaScript code that follows the table. Note that some of the input
elements define "onchange" or "onclick" event handlers. These specify strings
of JavaScript code to be executed when the user enters data or clicks.
-->
<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><td>Zipcode (to find lenders):</td>
<td><input id="zipcode" onchange="calculate();"></td>
<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>
<!-- The rest of this example is JavaScript code in the <script> tag below -->
<!-- Normally, this script would go in the document <head> above but it -->
<!-- is easier to understand here, after you've seen its HTML context. -->
<script>
"use strict"; // Use ECMAScript 5 strict mode in browsers that support it
/*
* This script defines the calculate() function called by the event handlers
* in HTML above. The function reads values from <input> elements, calculates
* loan payment information, displays the results in <span> elements. It also
* saves the user's data, displays links to lenders, and draws a chart.
*/
function calculate() {
// Look up the input and output elements in the document
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");
// Get the user's input from the input elements. Assume it is all valid.
// Convert interest from a percentage to a decimal, and convert from
// an annual rate to a monthly rate. Convert payment period in years
// to the number of monthly payments.
var principal = parseFloat(amount.value);
var interest = parseFloat(apr.value) / 100 / 12;
var payments = parseFloat(years.value) * 12;
// Now compute the monthly payment figure.
var x = Math.pow(1 + interest, payments); // Math.pow() computes powers
var monthly = (principal*x*interest)/(x-1);
// If the result is a finite number, the user's input was good and
// we have meaningful results to display
if (isFinite(monthly)) {
// Fill in the output fields, rounding to 2 decimal places
payment.innerHTML = monthly.toFixed(2);
total.innerHTML = (monthly * payments).toFixed(2);
totalinterest.innerHTML = ((monthly*payments)-principal).toFixed(2);
// Save the user's input so we can restore it the next time they visit
save(amount.value, apr.value, years.value, zipcode.value);
// Advertise: find and display local lenders, but ignore network errors
try { // Catch any errors that occur within these curly braces
getLenders(amount.value, apr.value, years.value, zipcode.value);
}
catch(e) { /* And ignore those errors */ }
// Finally, chart loan balance, and interest and equity payments
chart(principal, interest, monthly, payments);
}
else {
// Result was Not-a-Number or infinite, which means the input was
// incomplete or invalid. Clear any previously displayed output.
payment.innerHTML = ""; // Erase the content of these elements
total.innerHTML = ""
totalinterest.innerHTML = "";
chart(); // With no arguments, clears the chart
}
}
// Save the user's input as properties of the localStorage object. Those
// properties will still be there when the user visits in the future
// This storage feature will not work in some browsers (Firefox, e.g.) if you
// run the example from a local file:// URL. It does work over HTTP, however.
function save(amount, apr, years, zipcode) {
if (window.localStorage) { // Only do this if the browser supports it
localStorage.loan_amount = amount;
localStorage.loan_apr = apr;
localStorage.loan_years = years;
localStorage.loan_zipcode = zipcode;
}
}
// Automatically attempt to restore input fields when the document first loads.
window.onload = function() {
// If the browser supports localStorage and we have some stored data
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;
}
};
// Pass the user's input to a server-side script which can (in theory) return
// a list of links to local lenders interested in making loans. This example
// does not actually include a working implementation of such a lender-finding
// service. But if the service existed, this function would work with it.
function getLenders(amount, apr, years, zipcode) {
// If the browser does not support the XMLHttpRequest object, do nothing
if (!window.XMLHttpRequest) return;
// Find the element to display the list of lenders in
var ad = document.getElementById("lenders");
if (!ad) return; // Quit if no spot for output
// Encode the user's input as query parameters in a URL
var url = "getLenders.php" + // Service url plus
"?amt=" + encodeURIComponent(amount) + // user data in query string
"&apr=" + encodeURIComponent(apr) +
"&yrs=" + encodeURIComponent(years) +
"&zip=" + encodeURIComponent(zipcode);
// Fetch the contents of that URL using the XMLHttpRequest object
var req = new XMLHttpRequest(); // Begin a new request
req.open("GET", url); // An HTTP GET request for the url
req.send(null); // Send the request with no body
// Before returning, register an event handler function that will be called
// at some later time when the HTTP server's response arrives. This kind of
// asynchronous programming is very common in client-side JavaScript.
req.onreadystatechange = function() {
if (req.readyState == 4 && req.status == 200) {
// If we get here, we got a complete valid HTTP response
var
没有合适的资源?快使用搜索试试~ 我知道了~
JavaScript常用代码示例.zip
共125个文件
js:105个
html:18个
classof:1个
需积分: 5 0 下载量 8 浏览量
2024-03-05
17:39:48
上传
评论
收藏 143KB ZIP 举报
温馨提示
JavaScript常用代码示例
资源推荐
资源详情
资源评论
收起资源包目录
JavaScript常用代码示例.zip (125个子文件)
20.05.permanote.appcache 72B
06.04.classof 162B
01.01.loancalc.html 13KB
22.15.zipcodes.html 13KB
22.03.guessinggame.html 7KB
21.03.clock.html 4KB
22.04.TwitterSearch.html 3KB
22.10.ImageThumbnailer.html 3KB
16.02.windows.html 3KB
17.04.draggable_clock.html 2KB
22.16.wschatclient.html 2KB
18.15.chatclient.html 2KB
14.04.multiprompt.html 2KB
13.02.digital_clock.html 1KB
16.01.cssexample.html 1KB
22.12.FileTyper.html 1KB
13.01.reveal.html 1KB
22.11.FileReader.html 834B
13.03.from1996.html 627B
20.06.permanote.html 571B
17.08.Keymap.js 9KB
17.05.dndlist.js 7KB
22.13.fs.js 7KB
17.03.Enclose.js 6KB
09.16.Sets.js 6KB
12.01.rhinoURLFetcher.js 5KB
18.16.EventSourceEmulation.js 5KB
20.07.permanote.js 5KB
15.07.TOC.js 5KB
17.06.InputFilter.js 5KB
09.23.properties.js 4KB
17.02.Drag.js 4KB
21.02.PieChart.js 4KB
12.02.nodeserver.js 4KB
16.03.animations.js 4KB
21.13.sparkline.js 4KB
20.02.CookieStorage.js 4KB
09.03.Complex.js 4KB
20.04.appcacheevents.js 3KB
18.17.chatserver.js 3KB
09.06.Set1.js 3KB
18.13.linkdetails.js 3KB
16.05.classList.js 3KB
18.11.fileDropTarget.js 3KB
12.03.httputils.js 3KB
15.02.traversal.js 3KB
22.02.whereami.js 3KB
15.06.insert.js 3KB
06.02.extend.js 2KB
09.08.Cards.js 2KB
21.06.koch.js 2KB
21.07.curves.js 2KB
17.01.whenReady.js 2KB
09.24.Set2.js 2KB
15.05.outerHTML.js 2KB
08.03.extend_patched.js 2KB
21.10.smear.js 2KB
15.04.sortrows.js 2KB
22.17.wschatserver.js 2KB
22.14.fsworker.js 2KB
09.07.enumeration.js 2KB
09.17.objectid.js 2KB
08.04.addPrivateProperty.js 2KB
22.01.getmap.js 2KB
09.09.genericmethods.js 2KB
18.14.getJSONP.js 2KB
18.12.timedGetText.js 2KB
21.04.polygons.js 2KB
16.06.addStyles.js 2KB
09.04.type.js 2KB
22.05.TwitterSearch.js 2KB
08.02.functions_as_data.js 2KB
09.01.range.js 2KB
20.03.UserDataStorage.js 1KB
09.21.range6.js 1KB
11.01.linesgenerator.js 1KB
09.22.StringSet.js 1KB
09.15.FilteredSet.js 1KB
09.02.range2.js 1KB
21.05.graphics_state_utils.js 1KB
09.18.range4.js 1KB
06.03.extend2.js 1KB
21.01.rollover.js 1KB
22.06.SmearImage.js 1KB
18.03.get.js 1KB
18.10.postFormData.js 1KB
09.19.freezeProps.js 1KB
14.02.urlArgs.js 1KB
18.09.autoUpload.js 1KB
16.04.scale.js 1KB
18.08.postXML.js 1KB
14.01.invoke.js 1KB
08.01.defining_functions.js 1KB
22.08.AjaxWorker.js 1KB
09.12.SingletonSet.js 1KB
22.07.SmearWorker.js 1KB
09.05.quacks.js 1KB
20.01.getCookies.js 951B
09.11.defineSubclass.js 947B
14.03.uaparser.js 930B
共 125 条
- 1
- 2
资源评论
shandongwill
- 粉丝: 3429
- 资源: 413
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 数据库标识码BSM重排序工具、重构标识码工具
- 基于C语言的校园导航系统报告.doc
- __init__.py
- tensorflow-gpu-2.6.5-cp39-cp39-manylinux2010-x86-64.whl
- tensorflow-rocm-2.13.1.600-cp38-cp38-manylinux2014-x86-64.whl
- tensorflow-rocm-2.13.0.570-cp311-cp311-manylinux2014-x86-64.whl
- 3ds_1.0_3.6.ipa
- 卷积神经网络(Convolutional Neural Network,CNN
- 网页设计HTML、CSS和JS网页设计HTML、CSS和JS
- 利用Python构建作物病虫害识别分类系统
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功