技术问询：点击按钮清空文本框及球体体积计算前端代码问题

针对你提到的点击按钮清空文本输入框需求，我把它和球体体积计算的功能整合到了一起，下面是包含合法性校验、样式美化和清空逻辑的完整实现方案：

完整代码实现 #

HTML 结构 #

<form id="sphereVolumeForm">
  <label for="radiusInput">球体半径:</label>
  <input type="number" id="radiusInput" step="0.1" placeholder="请输入正数半径">
  <button type="button" onclick="CalcVolume()">计算体积</button>
  <button type="button" onclick="clearInputField()">清空输入</button>
  <p id="calculationResult"></p>
</form>

CSS 表单样式 #

#sphereVolumeForm {
  font-family: 'Arial', sans-serif;
  padding: 22px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  width: 320px;
  margin: 30px auto;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#sphereVolumeForm label {
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
  color: #333;
}

#sphereVolumeForm input {
  width: 100%;
  padding: 9px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

#sphereVolumeForm button {
  padding: 9px 18px;
  margin-right: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

#sphereVolumeForm button:first-of-type {
  background-color: #2196F3;
  color: white;
}

#sphereVolumeForm button:first-of-type:hover {
  background-color: #1976D2;
}

#sphereVolumeForm button:last-of-type {
  background-color: #FF5252;
  color: white;
}

#sphereVolumeForm button:last-of-type:hover {
  background-color: #FF1744;
}

#calculationResult {
  margin-top: 15px;
  font-size: 16px;
  min-height: 20px;
}

JavaScript 核心逻辑 #

// 球体体积计算函数（带合法性校验）
function CalcVolume() {
  const radiusInput = document.getElementById('radiusInput');
  const resultDisplay = document.getElementById('calculationResult');
  const radiusValue = parseFloat(radiusInput.value);

  // 输入合法性校验
  if (isNaN(radiusValue) || radiusValue <= 0) {
    resultDisplay.textContent = '⚠️ 请输入有效的正数值半径！';
    resultDisplay.style.color = '#FF1744';
    return;
  }

  // 执行体积计算：公式为 V = (4 × 3.14 × 半径³) / 3
  const sphereVolume = (4 * 3.14 * Math.pow(radiusValue, 3)) / 3;
  resultDisplay.textContent = `✅ 球体体积为：${sphereVolume.toFixed(2)} 立方单位`;
  resultDisplay.style.color = '#2E7D32';
}

// 输入框清空函数
function clearInputField() {
  const radiusInput = document.getElementById('radiusInput');
  const resultDisplay = document.getElementById('calculationResult');
  radiusInput.value = '';
  resultDisplay.textContent = '';
}

关键功能说明 #

• 清空逻辑：clearInputField()函数会同时清空输入框内容和结果显示区域，避免残留信息干扰用户操作；
• 合法性校验：CalcVolume()会先判断输入是否为有效正数，若输入非法（非数字、零或负数），会显示红色错误提示；
• 计算精度：最终结果保留两位小数，让输出更易读；
• 交互优化：按钮添加了hover变色效果，表单带轻微阴影，提升整体用户体验。

如果需要调整π的精度（比如用Math.PI替代3.14）、修改样式细节，直接修改对应代码片段即可。

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