场景描述
在实现购物车功能时，需要限制用户加购的数量必须大于0且不超过加购商品的库存量。
代码实现
下列代码中，<input></input>中使用 min 属性定义数量的最小值，max 属性定义数量的最大值。在实际开发中可以整合 springboot 和 thymeleaf，使用 th:max="${商品对象的库存量}" 将 max 的值设置为加购商品的库存量。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>购物车功能的数量加减限制</title>
</head>
<body>
<div class="input-counter">
<!-- 减少按钮 -->
<button class="minus-btn">-</button>
<!-- 加购数量 -->
<input type="text" name="count" value="1" min="1" max="5">
<!-- 增加按钮 -->
<button class="plus-btn">+</button>
</div>
<script>
// 获取类名为 minus-btn 的元素 减少按钮
const minusBtn = document.querySelector('.minus-btn');
// 获取类名为 plus-btn 的元素 增加按钮
const plusBtn = document.querySelector('.plus-btn');
// 获取类名为 minus-btn 的元素 加购数量
const input = document.querySelector('input[name="count"]');
// 为减少按钮添加事件监听器
minusBtn.addEventListener('click', () => {
// 获取 input 元素的值
let currentValue = parseInt(input.value);
// 当值大于 input 的 min 属性值时，值 - 1
if (currentValue > parseInt(input.min)) {
input.value = currentValue - 1;
}
});
// 为增加按钮添加事件监听器
plusBtn.addEventListener('click', () => {
// 获取 input 元素的值
let currentValue = parseInt(input.value);
// 当值小于 input 的 max 属性值时，值 + 1
if (currentValue < parseInt(input.max)) {
input.value = currentValue + 1;
}
});
</script>
</body>
</html>
效果显示
点击“-”按钮，输入框中的数量减 1；点击“+”按钮，输入框中的数量加 1。
当输入框中的数量为 1 时，点击“-”按钮数量不变；另外，当数量为 5 时，点击“+”按钮数量亦不变。
