如何实现支持用户自定义输入项数量的平均分动态计算器？

下面是一个纯前端实现的方案，包含动态添加/删除输入项、计算平均值的完整代码，直接就能用：

1. HTML结构 #

先搭好基础的页面框架，包含输入项容器、操作按钮和结果展示区：

<div class="calculator-container">
  <h3>动态平均值计算器</h3>
  <div id="input-container">
    <!-- 初始默认一个输入项 -->
    <div class="input-group">
      <input type="number" placeholder="输入数值" step="any">
      <button class="remove-btn">×</button>
    </div>
  </div>
  <button id="add-btn">添加输入项</button>
  <button id="calc-btn">计算平均值</button>
  <div id="result">平均值：<span id="avg-result">-</span></div>
</div>

2. CSS样式 #

简单美化一下排版，让界面更友好：

.calculator-container {
  max-width: 400px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  font-family: Arial, sans-serif;
}

.input-group {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.input-group input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.remove-btn, #add-btn, #calc-btn {
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.remove-btn {
  background-color: #ff4444;
  color: white;
}

#add-btn {
  background-color: #2ecc71;
  color: white;
  margin-right: 10px;
}

#calc-btn {
  background-color: #3498db;
  color: white;
}

#result {
  margin-top: 20px;
  font-size: 18px;
  font-weight: bold;
}

3. JavaScript逻辑 #

实现核心功能：动态添加/删除输入项、计算平均值：

// 获取DOM元素
const inputContainer = document.getElementById('input-container');
const addBtn = document.getElementById('add-btn');
const calcBtn = document.getElementById('calc-btn');
const avgResult = document.getElementById('avg-result');

// 添加输入项
addBtn.addEventListener('click', () => {
  const inputGroup = document.createElement('div');
  inputGroup.className = 'input-group';
  inputGroup.innerHTML = `
    <input type="number" placeholder="输入数值" step="any">
    <button class="remove-btn">×</button>
  `;
  inputContainer.appendChild(inputGroup);
});

// 删除输入项（事件委托，处理动态创建的元素）
inputContainer.addEventListener('click', (e) => {
  if (e.target.classList.contains('remove-btn')) {
    // 至少保留一个输入项
    if (inputContainer.children.length > 1) {
      e.target.parentElement.remove();
    }
  }
});

// 计算平均值
calcBtn.addEventListener('click', () => {
  const inputs = inputContainer.querySelectorAll('input');
  let sum = 0;
  let count = 0;

  inputs.forEach(input => {
    const value = parseFloat(input.value);
    // 过滤空值和非数值
    if (!isNaN(value)) {
      sum += value;
      count++;
    }
  });

  // 避免除以0的情况
  if (count === 0) {
    avgResult.textContent = '请输入有效数值';
    return;
  }

  const average = sum / count;
  // 保留两位小数，可根据需求调整
  avgResult.textContent = average.toFixed(2);
});

关键功能说明 #

• 动态添加/删除：点击「添加输入项」按钮会生成新的输入框，每个输入框右侧的×按钮可以删除对应项（至少保留一个输入项）
• 数值校验：计算时会自动过滤空值和非数字内容，避免出现计算错误
• 结果处理：计算结果保留两位小数，若没有有效数值会提示用户

直接把这三部分代码放到同一个HTML文件里，打开就能使用，完全满足你的需求。

内容的提问来源于stack exchange，提问作者Aseyounar