用js代码实现数量加减

使用HTML和JavaScript实现数量加减功能

创建简单的加减按钮控制数量增减，适用于购物车或表单场景。

HTML结构

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

JavaScript实现

document.addEventListener('DOMContentLoaded', function() {
  const quantityInput = document.getElementById('quantity');
  const incrementBtn = document.getElementById('increment');
  const decrementBtn = document.getElementById('decrement');

  incrementBtn.addEventListener('click', () => {
    quantityInput.value = parseInt(quantityInput.value) + 1;
  });

  decrementBtn.addEventListener('click', () => {
    const currentValue = parseInt(quantityInput.value);
    if(currentValue > 1) {
      quantityInput.value = currentValue - 1;
    }
  });
});

添加输入验证和限制

确保输入值始终为有效数字，并设置最大值限制。

quantityInput.addEventListener('input', function() {
  let value = parseInt(this.value);
  if(isNaN(value) || value < 1) {
    this.value = 1;
  }
  if(this.max && value > parseInt(this.max)) {
    this.value = this.max;
  }
});

// 设置最大值（可选）
quantityInput.max = 10;

使用事件委托优化性能

当页面有多个数量控制器时，采用事件委托方式。

document.addEventListener('click', function(e) {
  if(e.target.classList.contains('quantity-btn')) {
    const input = e.target.parentElement.querySelector('input');
    let value = parseInt(input.value);

    if(e.target.classList.contains('increment')) {
      input.value = value + 1;
    } else if(e.target.classList.contains('decrement') && value > 1) {
      input.value = value - 1;
    }
  }
});

对应HTML调整为：

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

添加动画效果增强用户体验

使用CSS过渡效果使交互更生动。

.quantity-control button {
  transition: background-color 0.3s;
}

.quantity-control button:active {
  background-color: #ddd;
}

input[type="number"] {
  transition: box-shadow 0.3s;
}

input[type="number"]:focus {
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

完整组件实现

将功能封装为可复用的类。

class QuantityControl {
  constructor(container, options = {}) {
    this.container = typeof container === 'string' 
      ? document.querySelector(container) 
      : container;
    this.min = options.min || 1;
    this.max = options.max || Infinity;
    this.onChange = options.onChange || function(){};
    this.init();
  }

  init() {
    this.input = this.container.querySelector('input');
    this.incrementBtn = this.container.querySelector('.increment');
    this.decrementBtn = this.container.querySelector('.decrement');

    this.input.min = this.min;
    if(this.max !== Infinity) this.input.max = this.max;

    this.incrementBtn.addEventListener('click', this.increment.bind(this));
    this.decrementBtn.addEventListener('click', this.decrement.bind(this));
    this.input.addEventListener('change', this.validate.bind(this));
  }

  increment() {
    let value = parseInt(this.input.value) + 1;
    if(value <= this.max) {
      this.input.value = value;
      this.onChange(value);
    }
  }

  decrement() {
    let value = parseInt(this.input.value) - 1;
    if(value >= this.min) {
      this.input.value = value;
      this.onChange(value);
    }
  }

  validate() {
    let value = parseInt(this.input.value);
    if(isNaN(value) || value < this.min) {
      this.input.value = this.min;
    } else if(value > this.max) {
      this.input.value = this.max;
    }
    this.onChange(this.input.value);
  }
}

// 使用示例
new QuantityControl('.quantity-control', {
  min: 1,
  max: 10,
  onChange: (value) => console.log('当前值:', value)
});