css 加减物品 |css中的maxlength

/* 定义按钮样式 */
.btn {
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid #ccc;
cursor: pointer;
}
/* 禁用按钮样式 */
.btn-disabled {
border-color: #eee;
color: #eee;
cursor: not-allowed;
}
/* 数量框样式 */
.quantity {
display: inline-block;
width: 80px;
height: 30px;
border: 1px solid #ccc;
position: relative;
}
/* 减少数量按钮位置 */
.quantity .minus {
left: 0;
}
/* 增加数量按钮位置 */
.quantity .plus {
right: 0;
}
/* 数量显示框 */
.quantity .qty {
text-align: center;
position: absolute;
top: 0;
width: 100%;
height: 30px;
line-height: 30px;
}

接着，需要在 HTML 中添加相应的结构和事件处理函数。

<div class="quantity" id="quantity-1">
<div class="minus btn btn-disabled" onclick="minusQty('quantity-1');">−</div>
<div class="qty">1</div>
<div class="plus btn" onclick="addQty('quantity-1');">&plus;</div>
</div>

其中，minusQty 和 addQty 分别是减少数量和增加数量的事件处理函数，代码如下：

function minusQty(qtyID) {
var qtyEl = document.getElementById(qtyID).getElementsByClassName("qty")[0];
var qty = parseInt(qtyEl.innerHTML);
if (qty >1) {
qtyEl.innerHTML = qty - 1;
toggleBtnState(qtyID, qty - 1);
}
}
function addQty(qtyID) {
var qtyEl = document.getElementById(qtyID).getElementsByClassName("qty")[0];
var qty = parseInt(qtyEl.innerHTML);
qtyEl.innerHTML = qty + 1;
toggleBtnState(qtyID, qty + 1);
}
function toggleBtnState(qtyID, qty) {
var minusBtn = document.getElementById(qtyID).getElementsByClassName("minus")[0];
var plusBtn = document.getElementById(qtyID).getElementsByClassName("plus")[0];
if (qty == 1) {
minusBtn.classList.add("btn-disabled");
} else {
minusBtn.classList.remove("btn-disabled");
}
if (qty == 10) {
plusBtn.classList.add("btn-disabled");
} else {
plusBtn.classList.remove("btn-disabled");
}
}

最后的效果就是一个长度为 80 像素、高度为 30 像素、带有减少和增加按钮的数量框，可以通过按钮实现加减商品数量的功能。当数量为 1 时，减少按钮会禁用；当数量为 10 时，增加按钮会禁用。