HTML、HTML贷款计算器

阅读：评论：0

HTML、HTML贷款计算器

本程序编写html贷款计算器，在js中进行值校验和结果计算。

工具：

ide：vscode

开发工具：jquery、bootstrap、typescript

loan.html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>贷款计算器</title><link rel="stylesheet" href="../css/bootstrap.min.css" /><style>/* 反馈提示 */.feedback {background-color: rgba(48, 45, 45, 0.5);min-width: fit-content;padding: 20px;border-radius: 5px;color: #fff;position: absolute;top: 15vh; left: 50vw;transform: translateX(-50%);display: none;}</style>
</head>
<body><!-- 容器 --><div class="container-md mt-3 p-2"><!-- 主体 --><div class="main"><!-- 响应式行 --><div class="row"><!-- 左列 --><div class="col-12 col-md-6"><!-- 左列标题 --><h3>Enter Loan Data</h3><!-- 输入框 --><form action="javascript:void(0)"><div class="d-flex align-items-center flex-wrap justify-content-between"><label for="amountOfLoan">Amount of the loan($):</label><input type="text" id="amountOfLoan" class="form-control w-50 mt-2" /><label for="annualInterest">Annual interest(%):</label><input type="text" id="annualInterest" class="form-control w-50 mt-2" /><label for="repaymentPeriod">Repayment period(years):</label><input type="text" id="repaymentPeriod" class="form-control w-50 mt-2" /><label for="zipcode">Zipcode (to find lenders):</label><input type="text" id="zipcode" class="form-control w-50 mt-2" /><label for="payment">Approximate Payments:</label><input type="button" id="calculate" class="btn btn-outline-primary my-2" value="Calculate" /></div></form><!-- 结果展示 --><div class="feedback-info"><ul class="list-unstyled"><li><span class="d-inline-block w-50">Monthly payment</span><span class="monthlyPayment"></span></li><li class="my-1"><span class="d-inline-block w-50">Total payment</span><span class="totalPayment"></span></li><li><span class="d-inline-block w-50">Total Interest</span><span class="totalInterest"></span></li></ul></div></div><!-- 右列 --><div class="col-12 col-md-6 p-2"><div class="d-flex flex-column align-items-center justify-content-center"><h5>Loan Balance, Cumulative Equity, and Interest Payments</h5><img src="../resources/img//u=3381965374,1747117691&fm=253&fmt=auto&app=138&f=JPEG.webp" alt="Loan Balance, Cumulative Equity, and Interest Payments" title="Loan Balance, Cumulative Equity, and Interest Payments"style="width: 100%; height: 300px;" class="bg-opacity-75 rounded" /></div></div></div></div><!-- 尾部 --><div class="footer py-2 px-md-5"><!-- 赞助人列表 --><span class="d-inline-block fw-bold fs-5">Sponsors:</span><span class="d-inline-block ms-5">Apply for your loan with one of these fine lenders</span><ul class="lender-list mt-3" style="margin-left: 11em;"></ul></div></div><!-- 提示框 --><div class="feedback"></div><script type="text/javascript" src="../js/jquery-3.6.1.min.js"></script><script type="text/javascript" src="../js/bootstrap.bundle.min.js"></script><script type="text/javascript" src="../ts/index.js"></script>
</body>
</html>

index.ts:

$(function() {/*** 检验输入框* * node: 输入框节点* * label: 标签信息*/function check(node: JQuery<HTMLElement>, label?: string): boolean {var val = ("" + node.val()).trim(), // 节点值feedback = $(".feedback"),      // feedback节点isValid = true;                 // bool变量// 检验是否为空if("" === val && !!label) {// 前节点设置字体样式node.prev().css({"color": "red"});// 设置feedback提示文本(`${label} cannot be empty`);isValid = false;} else// 检验是否为数字if(isValid && !/^d+(.d+)*$/.test(val)) {node.prev().css({"color": "red"});(`${label} is not a number`)isValid = false;}// 检验无效，显示feedback提示if(!isValid) {// 淡入并在3秒后淡出feedback.fadeIn(300, function() {setTimeout(() => {$(this).fadeOut();node.prev().css({"color": "black"});}, 3000);});}return isValid;}// 按钮注册点击事件$("#calculate").on("click", function() {const amountOfLoan = $("#amountOfLoan"),annualInterest = $("#annualInterest"),repaymentPeriod = $("#repaymentPeriod");// 如果检验有效，设置结果文本if(check(amountOfLoan, "Amount of Loan") &&check(annualInterest, "Annual of Interest") &&check(repaymentPeriod, "Repayment Period")) {var amount = parseFloat(<string>amountOfLoan.val()),interest = parseFloat(<string>annualInterest.val()) / 100 / 12,payments = parseFloat(<string>repaymentPeriod.val()) * 12,x = Math.pow(1 + interest, payments),monthly = (amount * x * interest) / (x - 1),lenderHTML = "";$(".monthlyPayment").text(`$${Fixed(2)}`);$(".totalPayment").text(`$${(monthly * payments).toFixed(2)}`);$(".totalInterest").text(`$${((monthly * payments) - amount).toFixed(2)}`);const lenderList: string[] = ["Bank of JavaScript", "HTML Credit Union"];for (const lender of lenderList) {lenderHTML += `<li>${lender}</li>`;}$(".lender-list").html(lenderHTML);} else { // 否侧，清空结果文本if("" !== $(".monthlyPayment").text()) {$(".monthlyPayment").text("");$(".totalPayment").text("");$(".totalInterest").text("");$(".lender-list").html("");}}});
});

index.js:

$(function () {/*** 检验输入框** node: 输入框节点** label: 标签信息*/function check(node, label) {var val = ("" + node.val()).trim(), // 节点值feedback = $(".feedback"), // feedback节点isValid = true; // bool变量// 检验是否为空if ("" === val && !!label) {// 前节点设置字体样式node.prev().css({ "color": "red" });// 设置feedback提示文本("".concat(label, " cannot be empty"));isValid = false;}else // 检验是否为数字if (isValid && !/^d+(.d+)*$/.test(val)) {node.prev().css({ "color": "red" });("".concat(label, " is not a number"));isValid = false;}// 检验无效，显示feedback提示if (!isValid) {// 淡入并在3秒后淡出feedback.fadeIn(300, function () {var _this = this;setTimeout(function () {$(_this).fadeOut();node.prev().css({ "color": "black" });}, 3000);});}return isValid;}// 按钮注册点击事件$("#calculate").on("click", function () {var amountOfLoan = $("#amountOfLoan"), annualInterest = $("#annualInterest"), repaymentPeriod = $("#repaymentPeriod");// 如果检验有效，设置结果文本if (check(amountOfLoan, "Amount of Loan") &&check(annualInterest, "Annual of Interest") &&check(repaymentPeriod, "Repayment Period")) {var amount = parseFloat(amountOfLoan.val()), interest = parseFloat(annualInterest.val()) / 100 / 12, payments = parseFloat(repaymentPeriod.val()) * 12, x = Math.pow(1 + interest, payments), monthly = (amount * x * interest) / (x - 1), lenderHTML = "";$(".monthlyPayment").text("$".Fixed(2)));$(".totalPayment").text("$".concat((monthly * payments).toFixed(2)));$(".totalInterest").text("$".concat(((monthly * payments) - amount).toFixed(2)));var lenderList = ["Bank of JavaScript", "HTML Credit Union"];for (var _i = 0, lenderList_1 = lenderList; _i < lenderList_1.length; _i++) {var lender = lenderList_1[_i];lenderHTML += "<li>".concat(lender, "</li>");}$(".lender-list").html(lenderHTML);}else { // 否侧，清空结果文本if ("" !== $(".monthlyPayment").text()) {$(".monthlyPayment").text("");$(".totalPayment").text("");$(".totalInterest").text("");$(".lender-list").html("");}}});
});

本文发布于:2024-01-30 23:09:41，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170662738223509.html

上一篇：编程学习笔记之消息地图

下一篇：雷柏蓝牙鼠标怎么连接

标签：计算器贷款 HTML

留言与评论（共有 0 条评论）