当前位置：首页 > JavaScript

用js代码实现数量加减

2026-01-31 07:15:39JavaScript

实现数量加减的 JavaScript 代码

以下是一个简单的 JavaScript 实现，用于在网页上实现数量的加减功能，通常用于购物车或表单中的数量选择器。

HTML 结构

<div class="quantity-selector">
  <button id="decrement">-</button>
  <input type="number" id="quantity" value="1" min="1">
  <button id="increment">+</button>
</div>

JavaScript 代码

// 获取 DOM 元素
const quantityInput = document.getElementById('quantity');
const decrementBtn = document.getElementById('decrement');
const incrementBtn = document.getElementById('increment');

// 减量按钮事件
decrementBtn.addEventListener('click', () => {
  let currentValue = parseInt(quantityInput.value);
  if (currentValue > parseInt(quantityInput.min)) {
    quantityInput.value = currentValue - 1;
  }
});

// 增量按钮事件
incrementBtn.addEventListener('click', () => {
  let currentValue = parseInt(quantityInput.value);
  quantityInput.value = currentValue + 1;
});

// 输入框验证
quantityInput.addEventListener('change', () => {
  if (quantityInput.value < parseInt(quantityInput.min)) {
    quantityInput.value = quantityInput.min;
  }
});

CSS 样式（可选）

.quantity-selector {
  display: flex;
  align-items: center;
}

.quantity-selector button {
  width: 30px;
  height: 30px;
  font-size: 16px;
  cursor: pointer;
}

.quantity-selector input {
  width: 50px;
  height: 28px;
  text-align: center;
  margin: 0 5px;
}

功能说明

点击减号按钮会减少数量，但不会低于设定的最小值（默认为1）。
点击加号按钮会增加数量。
输入框本身也支持手动输入数字，并通过验证确保不低于最小值。

扩展功能

如果需要限制最大值，可以添加 max 属性并修改增量按钮的代码：

// 修改后的增量按钮事件（带最大值限制）
incrementBtn.addEventListener('click', () => {
  let currentValue = parseInt(quantityInput.value);
  if (currentValue < parseInt(quantityInput.max)) {
    quantityInput.value = currentValue + 1;
  }
});

// 修改后的输入框验证
quantityInput.addEventListener('change', () => {
  if (quantityInput.value < parseInt(quantityInput.min)) {
    quantityInput.value = quantityInput.min;
  }
  if (quantityInput.value > parseInt(quantityInput.max)) {
    quantityInput.value = quantityInput.max;
  }
});