Question

由于我仍然是Web开发的新手，因此重构代码仍然给我带来一些麻烦。如果有人可以为我构建的利率计算器查看Javascript，并为我提供一些关于如何重构/提高效率的指导，我将非常感激。

它包含三个功能：

第一个createOptions只是在数字1到100之间循环，并将这些数字中的每一个作为选项附加到用于百分比输入的下拉菜单中。
第二个方法computeInterest是不言自明的。使用的公式假定为复利。它还包含一个循环，循环遍历每次付款，直到达到输入的付款期限。复利是指计算代表利率的初始金额（本金）的百分比，并将其添加到本金中，然后将其总和（利息加本金）的百分比相加。对于循环的每个迭代重复此过程。
最后一个函数onClick在DOM中获取表单数据，将其存储在变量中，然后调用calculateInterest，并将变量传递到其参数中。

我主要对有关Javascript的建议感兴趣，但是任何HTML和CSS指针也将不胜感激

这是HTML：

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="./style.css">


  <h1 id = "title">Interest Rate Calculator</h1>
<div class="container">
 <div class = "wrap">
   <label>% INTEREST</label>
   <select class = 'form-control' style = "width: 10%" name="percentage" id= "percentage"></select>

   <label> $ AMOUNT</label>
   <input type="number" min = '1' max = '999999999' name = "amount" id = "amount" class = "form-control" style = "width: 10%">
   <label for=""># OF PAYMENTS</label>
   <input type = "number" min = '1' max = '999' id = "time" class = "form-control" style = "width: 10%">
    <button onClick = "onClick()" target = "_top" class = 'btn btn-light'>CALCULATE!</button>  
   </div>
 </div>


 <div id="result">
   <p id = "show"></p>
 </div>
  <script type="text/javascript" src = "./script.js"></script>

CSS：

 body {
  background: linear-gradient( rgb(25, 25, 230), rgb(255, 255, 255));
  background-repeat: no-repeat;
  box-sizing: border-box;

    }

    h1 {
      text-align: center;

    }

    #title {
      font-family: Verdana;
      text-transform: uppercase;
      color: white;
    }
    label {
      font-weight: bolder;
      color: black;
    }
    .btn, .btn-light {
      margin-top: 10px;

    }

    #result {
      margin-top: 10px;
      font-size: 24px;
      text-align: center;

    }

    .wrap {
      position: relative;
      left: 45%;
    }

    .show {
      animation: fadeIn 1.8s ease-in 0.2s 1 normal both running;
    }

    @keyframes fadeIn {
      from {
        opacity: 0; 
      }

      to {
        display: block;
        opacity: 1;
      }
    }

    .test {

      font-size: 60px;
    }

JS：

createOptions();

function createOptions(){
  let select = document.getElementById('percentage');
  for(var i = 0; i <= 100; i++){ 
  var node = document.createElement("option");
  node.innerHTML = i;
  node.setAttribute('value', i);
  node.setAttribute('class', 'percent');
  select.appendChild(node); 
  }
}


function calculateInterest(amount, payments, interest){
  var total = amount;
  for(var i = 1; i <= payments; i++){
    var percent = total * interest;
    total = total += percent;
  }
  return '$' + total.toFixed(2); 
}

function onClick(){

  var para = document.getElementById('show');
  var result = document.getElementsByTagName('div')

  var select = document.getElementById('percentage');
  var percentValue = select.options[select.selectedIndex].value / 100;
  var amounts = document.getElementById('amount');
  var amountValue = parseFloat(amounts.value);
  var time = document.getElementById('time');
  var timeValue = parseInt(time.value);

  if(para.className === "show test"){
    para.remove()
    var para = document.createElement('p');
    para.id = "show"
    var result = document.getElementById('result')
    result.appendChild(para);
  }

  para.innerHTML = calculateInterest(amountValue, timeValue, percentValue);
  para.className = "show";
  para.className += " test"

}

利率计算器的重构代码

0 个答案: