当前位置：首页 > JavaScript

用js代码实现数量加减

2026-04-04 23:15:48JavaScript

实现数量加减功能

以下是一个使用JavaScript实现数量加减功能的示例代码。这个例子包括一个简单的HTML界面和对应的JavaScript逻辑，允许用户通过按钮增加或减少数量。

用js代码实现数量加减

HTML部分

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

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;
}

JavaScript部分

document.addEventListener('DOMContentLoaded', function() {
  const quantityInput = document.getElementById('quantity');
  const decreaseBtn = document.getElementById('decrease');
  const increaseBtn = document.getElementById('increase');

  decreaseBtn.addEventListener('click', function() {
    let currentValue = parseInt(quantityInput.value);
    if (currentValue > parseInt(quantityInput.min)) {
      quantityInput.value = currentValue - 1;
    }
  });

  increaseBtn.addEventListener('click', function() {
    let currentValue = parseInt(quantityInput.value);
    quantityInput.value = currentValue + 1;
  });
});

功能说明

这段代码创建了一个简单的数量选择器，包含减少(-)和增加(+)按钮以及一个显示当前数量的输入框。

用js代码实现数量加减

减少按钮会检查当前值是否大于允许的最小值(默认为1)，如果是则减少数量
增加按钮会直接将当前值加1
输入框限制了最小值为1，防止用户手动输入小于1的值

扩展功能

如果需要更复杂的功能，可以考虑以下改进：

// 添加输入验证
quantityInput.addEventListener('change', function() {
  if (this.value < parseInt(this.min)) {
    this.value = this.min;
  }
});

// 添加最大限制
const maxQuantity = 10;
increaseBtn.addEventListener('click', function() {
  let currentValue = parseInt(quantityInput.value);
  if (currentValue < maxQuantity) {
    quantityInput.value = currentValue + 1;
  }
});

这个扩展版本添加了输入验证和最大数量限制，确保用户不能输入超出范围的数值。