JSFiddle - React, Tailwind, and code Playground

HTML

<h1>動態比例計算器</h1>
<label for="inputNumber">請輸入一個整數：</label>
<input type="number" id="inputNumber" min="1" />
<button onclick="calculate()">計算</button>

<h2 id="result"></h2>
<h2 id="minInteger"></h2>

<h3>各百分比計算結果：</h3>
<div id="percentage-results"></div>

<h3>設定百分比：</h3>
<div id="percentage-container"></div>
<button onclick="addPercentage()">新增百分比</button>

CSS

body {
  font-family: Arial, sans-serif;
  margin: 20px;
}
.percentage-item {
  margin-bottom: 10px;
}
.percentage-item input {
  margin-right: 5px;
}
.result-item {
  margin-bottom: 10px;
}

JavaScript

// 預設四個百分比
let percentages = [0.003, 0.007, 0.025, 0.03]
let percentageCount = percentages.length // 記錄當前百分比的數量

// 當用戶添加新百分比時，呼叫此函數
function addPercentage() {
  let newPercentageDiv = document.createElement("div")
  newPercentageDiv.classList.add("percentage-item")

  newPercentageDiv.innerHTML = `
                <label>百分比 ${percentageCount + 1}：</label>
                <input type="number" step="0.001" min="0" placeholder="輸入百分比">
                <button onclick="removePercentage(this)">刪除</button>
            `

  document.getElementById("percentage-container").appendChild(newPercentageDiv)
  percentageCount++
}

// 刪除百分比項目
function removePercentage(button) {
  let percentageDiv = button.parentNode
  percentageDiv.remove()
  percentageCount--
}

// 當用戶計算時，根據所有百分比計算總和並找出最小符合條件的整數
function calculate() {
  let inputNumber = parseInt(document.getElementById("inputNumber").value)
  if (isNaN(inputNumber) || inputNumber <= 0) {
    alert("請輸入有效的整數！")
    return
  }

  let sum = 0
  percentages = [] // 清空百分比陣列
  let resultsContainer = document.getElementById("percentage-results")
  resultsContainer.innerHTML = "" // 清空原有結果

  // 收集用戶輸入的所有百分比
  let percentageInputs = document.querySelectorAll(".percentage-item input")
  percentageInputs.forEach((input) => {
    let percentage = parseFloat(input.value) / 100 // 使用者輸入百分比
    if (!isNaN(percentage) && percentage > 0) {
      percentages.push(percentage)
    }
  })

  // 顯示每個百分比計算結果
  percentages.forEach((p, index) => {
    let percentageValue = Math.round(inputNumber * p)
    sum += percentageValue

    // 顯示單個百分比結果，並將百分比保留2位小數
    let resultItem = document.createElement("div")
    resultItem.classList.add("result-item")
    resultItem.innerText = `百分比 ${index + 1}: ${(p * 100).toFixed(2)}% => ${percentageValue}`
    resultsContainer.appendChild(resultItem)
  })

  // 顯示總和
  document.getElementById("result").innerText = "總和: " + sum

  // 查找最小符合條件的整數
  let...