如何使用HTML、CSS和JavaScript实现带极值提示的温度选择器

先看修复并完善后的完整代码，我会逐部分解释修改点：

<div class="temperature-selector">
  <button onclick="adjustTemp(1)">ᐱ</button>
  <input id="TempBox" value="15" type="text" readonly>
  <button onclick="adjustTemp(-1)">ᐯ</button>
</div>

<style>
.temperature-selector {
  max-height: 120px; /* 限制整体最大高度 */
  display: flex;
  align-items: center;
  gap: 8px; /* 按钮和输入框之间的间距 */
  padding: 10px;
}

.temperature-selector button {
  width: 40px; /* 自定义按钮宽度，可按需修改 */
  height: 40px; /* 自定义按钮高度，可按需修改 */
  font-size: 20px;
  border: none;
  border-radius: 4px;
  background-color: #f0f0f0;
  cursor: pointer;
  transition: background-color 0.2s;
}

.temperature-selector button:hover {
  background-color: #e0e0e0;
}

#TempBox {
  width: 60px;
  padding: 8px;
  font-size: 18px;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 4px;
}
</style>

<script>
const tempInput = document.getElementById('TempBox');
const MIN_TEMP = 15;
const MAX_TEMP = 28;

function adjustTemp(change) {
  // 先判断当前是否是MAX/MIN状态，是则先恢复对应阈值再处理
  let currentValue = tempInput.value;
  if (currentValue === 'MAX') {
    currentValue = MAX_TEMP;
  } else if (currentValue === 'MIN') {
    currentValue = MIN_TEMP;
  }
  
  // 转成数字计算，避免字符串拼接错误
  let newTemp = parseInt(currentValue) + change;
  
  // 边界判断与赋值
  if (newTemp > MAX_TEMP) {
    tempInput.value = 'MAX';
  } else if (newTemp < MIN_TEMP) {
    tempInput.value = 'MIN';
  } else {
    tempInput.value = newTemp;
  }
}
</script>

关键修改点说明 #

1. 修复原JavaScript的核心问题 #

• 原代码错误使用innerHTML操作input内容，input的内容必须通过value属性获取/设置。
• 未将输入值转为数字，导致15 + 1变成字符串拼接的151，这里用parseInt()转为整数后再计算。
• 合并加减逻辑为一个adjustTemp(change)函数，通过传入1或-1统一处理，减少重复代码。

2. 实现MAX/MIN边界控制 #

• 定义常量MIN_TEMP和MAX_TEMP，后续修改阈值只需改这两个值。
• 每次操作前检查输入框是否显示"MAX"或"MIN"，如果是则先恢复到对应阈值再计算（比如显示MAX时点击减号，会回到28再减1变成27）。
• 计算后判断新温度是否越界，越界则显示提示文本，否则显示计算后的数值。

3. CSS样式设置 #

• 用容器div.temperature-selector包裹所有元素，设置max-height:120px确保整体高度不超限制。
• 使用flex布局让按钮和输入框垂直居中，视觉更协调。
• 自定义按钮尺寸、颜色等样式，你可以根据需求修改width、height、font-size等属性。
• 给输入框加readonly属性，避免用户手动输入，只能通过按钮调整数值。

jQuery版本（可选） #

如果你偏好jQuery，替换JS部分为以下代码即可（记得先引入jQuery库）：

const MIN_TEMP = 15;
const MAX_TEMP = 28;
const $tempInput = $('#TempBox');

function adjustTemp(change) {
  let currentValue = $tempInput.val();
  if (currentValue === 'MAX') {
    currentValue = MAX_TEMP;
  } else if (currentValue === 'MIN') {
    currentValue = MIN_TEMP;
  }
  
  let newTemp = parseInt(currentValue) + change;
  
  if (newTemp > MAX_TEMP) {
    $tempInput.val('MAX');
  } else if (newTemp < MIN_TEMP) {
    $tempInput.val('MIN');
  } else {
    $tempInput.val(newTemp);
  }
}

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