- 浏览: 1110947 次
文章分类
- 全部博客 (379)
- S2SH (16)
- stuts2 (0)
- java语言 (81)
- JSP (17)
- <html>元素 (11)
- javaweb (4)
- web容器 (3)
- ext (23)
- javaScript (48)
- ant (1)
- liferay (1)
- sql (9)
- css (42)
- 浏览器设置 (3)
- office_world (1)
- eclipse (4)
- 其它 (28)
- 操作系统 (5)
- android (6)
- Struts2 (11)
- RegEx (3)
- mysql (5)
- BigDATA (1)
- Node.js (1)
- Algorithm (10)
- Apache Spark (1)
- 数据库 (5)
- linux (2)
- git (1)
- Adobe (3)
- java语言,WebSocket (1)
- Maven (3)
- SHELL (1)
- XML (2)
- 数学 (2)
- Python (2)
- Java_mysql (1)
- ReactJS (6)
- 养生 (4)
- Docker (1)
- Protocols (3)
- java8 (2)
- 书籍 (1)
- Gradle (2)
- AngularJS (5)
- SpringMVC (2)
- SOAP (1)
- BootstrapCSS (1)
- HTTP协议 (1)
- OAuth2 (1)
最新评论
-
Lixh1986:
Java并发编程:自己动手写一把可重入锁https://blo ...
Java之多线程之Lock与Condition -
Lixh1986:
http://win.51apps.com.cn/https: ...
temp -
ztwsl:
不错,支持很好
HttpServletRequest和ServletRequest的区别 -
guodongkai:
谢谢您能将知识精华汇编总结,让初学者们从原理中学会和提高。
javaScript之function定义 -
kangwen23:
谢谢了,顶顶
struts2中的ValueStack学习
犀牛书上的
基于JavaScript实现的贷款计算器:
<!DOCTYPE html> <html> <head> <title>JavaScript Loan Calculator</title> <style> .output{font-weight:bold;} #payment{text-decoration:underline;} #graph{border:solid black 1px;} th,td{vertical-align:center;} </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='470' 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> <td>Approximate Payments:</td> <td><button onclick='calculate();'>Calculate</button></td> </tr> <tr> <td>Monthly Payments:</td> <td>$<span class='output' id='payment'></span></td> </tr> <tr> <td>Total Payments:</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 width one of these fine lenders: <div id='lenders'><div> </td> </tr> </table> <script type="text/javascript"> "use strict"; function $(id){ return document.getElementById(id); } function calculate (){ var amount = $('amount'); var apr = $('apr'); var years = $('years'); var zipcode = $('zipcode'); var payment = $('payment'); var total = $('total'); var totalinterest = $('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);// power method. 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; } } window.onload = function(){ if(window.localStorage&&localStorage.loan_amount){ $('amount').value = localStorage.loan_amount; $('apr').value = localStorage.loan_apr; $('years').value = localStorage.loan_years; $('zipcode').value = localStorage.loan_zipcode; } } function getLenders(amount,apr,years,zipcode){ if(!window.XMLHttpRequest)return ; var ad = $('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>'; } ad.innerHTML = 'ul' + list + 'ul'; } } } function chart(principal,interest,monthly,payments){ var graph = $('graph'); graph.width = graph.width; if(arguments.length==0|| !graph.getContext)return ; var g = graph.getContext('2d'); var width = graph.width, 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 m = (principal - equity)*interest; equity += (monthly - m); g.lineTo(paymentToX(p),amountToY(equity)); } g.lineTo(paymentToX(payments),amountToY(0)); g.closePath(); g.fillStyle = 'green'; g.fill(); g.font="bold 12px sans-serif"; 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 m = bal*interest; bal -= (monthly - m); g.lineTo(paymentToX(p),amountToY(bal)); } g.lineWidth = 1; g.stroke(); g.fillStyle = 'black'; g.fillText("Total Balance",20,50); 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 测试框架之 隐式声明 之 describe
2019-06-25 15:26 2578为什么使用 javascript 测试框架时,没有显式导入 d ... -
JavaScript之ECMAScript6新特性之_03_箭头函数(Arrow Function)
2018-01-25 13:46 1116一、简介 箭头函数(Arrow Function)是 ES6 ... -
JavaScript之ECMAScript6新特性之_02_线程异步阻塞: Promise, Async / await
2018-01-12 16:51 2321刚出来不久的 ES8 包含了 async 函数,它的出现,终于 ... -
JavaScript之ECMAScript6新特性之_01_开篇
2017-08-17 02:54 601点此查看全部: http://es6-features.org ... -
jQuery Versions - browser support
2017-08-12 04:19 1610jQuery 3.2.1 Support Deskto ... -
基于HTML5实现的中国象棋游戏
2017-06-24 02:24 1681HTML5实现中国象棋游戏 http://www.w2bc.c ... -
JavaScript之跨域请求解决方案
2017-06-07 11:03 3967浏览器处于安全原因,在使用 Ajax 进行请求访问时,不允许跨 ... -
JavaScript之 25 道面试题
2017-04-17 17:05 94925 Essential JavaScript Intervi ... -
JavaScript小应用之分页算法
2017-03-16 12:56 662效果图: function getPagina ... -
jQuery之empty() VS. remove()
2017-03-16 10:32 719jQuery empty() vs remove() Wh ... -
jQuery之 prop() VS. attr()
2017-03-14 16:43 656attr() 用于自定义属性,id ; prop() 用于 ... -
jQuery之mouseover,mouseover,mouseout,mouseleave
2017-03-14 10:20 653Jquery mouseenter() vs mouseove ... -
javascript之JS操作iframe
2017-02-28 14:56 2191JS操作iframe 1. 获得iframe的w ... -
javascript之面向对象编程之原型继承
2017-01-02 15:34 1116前文讲到“属性继承” ... -
HTML5之Cookie,localStorage 与 sessionStorage
2016-12-22 18:35 842详说 Cookie, LocalStorage 与 ... -
jquery之live(), delegate(), on() 方法
2016-11-26 23:48 925通过下面的一个实例理解 jQuery 的 live(), de ... -
javascript之小应用:网页在线聊天
2016-11-08 11:48 4292概览 这款使用 PHP 和 javascript 搭建的 ... -
javascript之编程序题目
2016-11-06 17:30 10501. 判断两个字符串是否:字母相同切长度相同(空格不算)。 ... -
javascript之面向对象编程之属性继承
2016-10-23 21:09 885函数继承可以分为两种:1、继承其 this 属性 2、继承其 ... -
javascript 之 undefined
2016-08-12 11:01 703一、用法 undefined 关键字有两种用法: 1. 如 ...
相关推荐
在本案例中,“微信小程序设计-房贷计算器”是一个专为计算房贷而设计的小程序项目,用户可以通过它方便地估算自己的贷款负担。下面将详细介绍房贷计算器涉及的相关知识点。 1. 微信小程序开发环境搭建: 开发微信...
在这个名为“微信小程序-房贷计算器”的项目中,我们将会探讨如何利用微信小程序的开发框架,构建一个实用的房贷计算工具,这在房地产交易、个人财务规划等领域具有广泛的应用。 首先,我们要了解微信小程序的基本...
开发者通常使用JavaScript、WXML(微信小程序标记语言)和WXSS(微信小程序样式语言)来构建小程序的界面和逻辑。房贷计算器作为一款实用工具,其核心功能是计算用户的贷款额度、月供、利息等关键数据,基于用户输入...
微信小程序是一种轻量级的应用开发平台,主要针对移动端...通过分析这个房贷计算器的源码,开发者可以学习到如何将这些技术实际应用于微信小程序的开发,同时也能理解房贷计算的算法,对于提升小程序开发能力大有裨益。
微信小程序是一种轻量级的应用开发平台,它允许开发者在微信内创建无需安装即可使用的应用,极大地提升了用户体验。这个房贷计算器案例源码是针对移动开发者的实践教程,帮助他们理解和掌握微信小程序的开发技能。 ...
微信小程序是一种轻量级的应用开发平台,主要针对移动端,由腾讯公司推出,旨在提供便捷的、无需下载安装即可使用的应用服务。"房贷计算器小程序源码及项目截图"是一份资源,包含了开发微信小程序时用于计算房贷的源...
在这个基于JavaScript的贷款计算器项目中,我们主要探讨以下几个关键知识点: 1. **DOM操作**:HTML(文档对象模型)是网页内容的结构化表示,JavaScript通过DOM API可以动态地操作这些元素。在贷款计算器中,...
"微信小程序项目-房贷计算器WX_MortgageCalculator-master.zip" 是一个专为微信小程序设计的源代码项目,其核心功能是帮助用户计算房贷的相关费用,比如月供、总利息以及贷款总额等。 在该项目中,我们可以学习到...
微信小程序是一种轻量级的应用开发平台,主要针对移动端,由腾讯公司推出,旨在提供便捷的、无需下载安装即可使用的线上服务。在这个“微信小程序实例-房贷计算器.zip”压缩包中,包含了一个完整的微信小程序项目,...
微信小程序是一种轻量级的应用开发平台,主要针对移动端,由腾讯公司推出,旨在提供便捷的、无需下载安装即可使用的线上服务。"微信小程序项目源码-房贷计算器.zip" 是一个包含房贷计算器小程序完整源代码的压缩包,...
总的来说,这个"jQuery房地产贷款计算器代码"是一个实用的工具,结合了jQuery的灵活性和JavaScript的强大计算能力,为潜在购房者提供了一个方便的平台,以便他们更好地理解贷款的财务影响。通过理解和定制此类代码,...
房贷计算器是许多网站和应用中常见的功能,它帮助用户根据贷款金额、利率、期限等因素,预估每月还款额和总利息支出。 首先,React作为项目的基石,负责处理视图层的更新。开发者可以通过定义组件来构建整个应用,...
在这个房贷计算器中,JavaScript被用来处理用户的输入,计算各种贷款方案的月供、总利息等关键数据。JavaScript的事件监听机制(如`addEventListener`)可以捕捉用户操作,如点击按钮时触发计算函数。此外,...
在压缩包中的"地产贷款计算器(房贷计算器)示例"文件,包含了整个项目的源代码、资源文件以及配置文件。开发者可以通过解压并导入到uni-app的开发环境中,进行代码阅读、调试和个性化修改,以适应自己的需求。 总...
在实际应用中,公积金贷款计算器源码还可以进一步扩展,比如增加不同银行的利率对比、贷款政策解读、贷款计算器API供其他网站调用等功能。同时,源码的优化和维护也很重要,确保计算准确无误,用户体验流畅。 总的...
2. 功能模块:主要包含投资计算器、贷款计算器、复利计算器等功能,帮助用户快速了解金融产品的潜在收益或还款压力。 二、投资计算器 投资计算器用于估算投资产品的收益。用户可以输入投资额、年化收益率和投资...
【HTML+CSS+JS 贷款计算器】是一款基于网页技术实现的实用工具,它能够帮助用户计算贷款的...在实际开发过程中,开发者还需考虑浏览器兼容性、性能优化和用户体验提升等多方面因素,以打造出更加完善的贷款计算器应用。
在实际应用中,房贷计算器不仅可以帮助个人购房者做出明智的贷款决策,还可以作为房地产经纪人或金融机构提供咨询服务的工具。通过理解房贷计算器的工作原理和使用方法,购房者可以更好地理解和管理自己的贷款负担,...
房贷计算器是移动开发领域中一个常见且实用的小程序应用,主要服务于有购房需求的用户,帮助他们计算贷款的月供、利息总额以及还款计划。在本项目中,我们拥有一套完整的微信小程序房贷计算器的源代码,包括图文教程...