HTML、HTML贷款计算器

Renaissance&复活

于 2023-08-20 17:32:12 发布

阅读量258

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/m0_62659797/article/details/132393946

版权

本程序编写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提示文本
      feedback.text(`${label} cannot be empty`);
      isValid = false;
    } else

    // 检验是否为数字
    if(isValid && !/^\d+(\.\d+)*$/.test(val)) {
      node.prev().css({"color": "red"});
      feedback.text(`${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(`$${monthly.toFixed(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提示文本
            feedback.text("".concat(label, " cannot be empty"));
            isValid = false;
        }
        else 
        // 检验是否为数字
        if (isValid && !/^\d+(\.\d+)*$/.test(val)) {
            node.prev().css({ "color": "red" });
            feedback.text("".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("$".concat(monthly.toFixed(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("");
            }
        }
    });
});