用JS实现的一个贷款计算器

最终实现的效果，如图

HTML

    <table id="myTable"><tr><th>输入贷款数据</th><td></td><th>贷款余额、贷款金额和利息支付</th></tr><tr><td>贷款金额 ($):</td><td><input id="amount" onchange="calculate()" /></td><td rowspan=8><canvas id='graph' width=400 height=250></canvas></td></tr><tr><td>年利息(%):</td><td><input id='apr' onchange="calculate()" /></td></tr><tr><td>还款期(年):</td><td><input id='years' onchange="calculate()" /></td></tr><tr><td>首期付款:</td><td><input id='firstPut' onchange="calculate()" /></td></tr><tr><td /><td><button onclick="calculate()">计算</button></td></tr><tr><td>每月付款:</td><td>$<span class="output" id="payment"></span></td></tr><tr><td>付款总额:</td><td>$<span class="output" id="total"></span></td></tr><tr><td>总利息:</td><td>$<span class="output" id="totalinterest"></span></td></tr></table>

CSS

        #myTable {margin: auto;}.output {font-weight: bolder;}#payment {text-decoration: underline;}#graph {border: solid black 1px;}th td {vertical-align: top;}button {cursor: pointer;}

    function calculate() {// 贷款金额let amount = document.getElementById('amount');// 年利息let apr = document.getElementById('apr');// 还款期let years = document.getElementById('years');// 首期付款let firstPut = document.getElementById('firstPut');if (firstPut.value == "") {firstPut.value = 0}  //没有输出则默认首期付款为0// 每月支付let payment = document.getElementById('payment');// 总支付let total = document.getElementById('total');// 总利息let totalinterest = document.getElementById('totalinterest');// firstPutMoney 首期付款金额let firstPutMoney = parseFloat(firstPut.value);// amount 贷款总额let principle = parseFloat(amount.value) - firstPutMoney;// apr 年利率let interest = parseFloat(apr.value) / 100 / 12;// 偿还周期 月份let payments = parseFloat(years.value) * 12;// pow 求次幂let x = Math.pow(1 + interest, payments);// monthly 每月还款金额let monthly = (principle * x * interest) / (x - 1);//如果没有超过数字范围，且用户输入也正确if (isFinite(monthly)) {payment.innerHTML = monthly.toFixed(2);total.innerHTML = (monthly * payments).toFixed(2);totalinterest.innerHTML = (monthly * payments - principle).toFixed(2);// 保存数据到本地save(amount.value, apr.value, years.value, firstPut.value);// 画图chart(principle, interest, monthly, payments);} else {//计算结果不是数字或者无穷大，意味着输入数据是非法或不完整的//清空数据payment.innerHTML = "";total.innerHTML = "";totalinterest.innerHTML = "";chart();}}//将用户输入保存至localSorage对象的属性中function save(amount, apr, years, firstPut) {if (window.localStorage) { //只有支持的浏览器才能运行这个代码localStorage.loan_amount = amount;localStorage.loan_apr = apr;localStorage.loan_years = years;localStorage.loan_firstPut = firstPut;}}//文档首次加载的时，将会尝试还原输入字段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('firstPut').value = localStorage.loan_firstPut;calculate() //如果有值则自动计算}}//在HTML<canvas>元素中用图表展示贷款余额、利息和资产收益//如果不传参的话则清空之前图表数据function chart(principle, interest, monthly, payments) {

用JS实现的一个贷款计算器相关推荐

Nexus.js介绍：一个多线程的JavaScript运行库
首先,如果你不熟悉这个项目,建议先阅读之前写的一系列文章.如果你不想阅读这些,不用担心.这里面也会涉及到那些内容. 现在,让我们开始吧. 去年,我开始实现Nexus.js,这是一个基于Webkit/J ...
web静态资源访问规则||webjars的访问配置——webjars是maven库里面对css js image打的一个jar包
Html css js image txt web项目中放在 Webapp 在springboot项目中静态资源放置的位置 Springboot默认的静态资源目录 (1)在src/main ...
go html vue,用Go+Vue.js快速搭建一个Web应用(初级demo)
Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文给大家介绍用Go+Vue.js快速搭建一个Web应用(初级demo). 环境准备: 1. 安装go语言,配置go开 ...
二十七、Node.js搭建第一个Express应用框架
@Author:Runsen @Date:2020/6/8 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼身心:在每天的不断重复学习中,耐住寂寞,练就真功,不畏艰 ...
php验证数字100倍数,js如何实现一个文本框只能输入数字且是100的倍数
js如何实现一个文本框只能输入数字且是100的倍数? php var a = 123,b = 200; /\d/.test(a) && a % 100 == 0;//false /\ ...
处理JS异常的一个想法
处理 JS 异常的一个想法可能由于网络.浏览器问题.缓存等原因,可能导致线上执行 js 的时候与开发环境并不一样,会抛出异常.js 异常基本上是前端开发工程师的家常便饭.如何记录,并使用它,却很少人 ...
如何把js变量传递给html页面,如何将js变量从一个html文件传递给另一个？
我的问题很简单,但由于我仍然缺乏合并js,php和html的熟练程度,因此无法找到解决此问题的解决方案. 问题涉及3个文件:如何将js变量从一个html文件传递给另一个? JS1.js functio ...
[js] 手写一个trim()的方法
[js] 手写一个trim()的方法 function trim(str) { if (str[0] === ' ' && str[str.length - 1] === ' ') { ...
[js] 请写一个性能最好的深度克隆对象的方法
[js] 请写一个性能最好的深度克隆对象的方法 const deepClone = (obj) => {const copy = obj instance Array ? [] : {};for ...

用JS实现的一个贷款计算器

用JS实现的一个贷款计算器相关推荐

最新文章

热门文章