CSS增加商品數量

在電商網站中，購物車是一個非常重要的功能模塊，其中涉及到增加商品數量的操作。本文將介紹如何使用CSS來實現增加商品數量的功能。

/*CSS代碼*/
/* 增加按鈕樣式 */
.increase-btn {
width: 30px;
height: 30px;
background-color: #eee;
border: 1px solid #ccc;
text-align: center;
font-size: 20px;
cursor: pointer;
}
/* 數量顯示樣式 */
.quantity {
width: 50px;
height: 30px;
margin-right: 10px;
text-align: center;
font-size: 18px;
border: 1px solid #ccc;
display: inline-block;
}
/* 減少按鈕樣式 */
.decrease-btn {
width: 30px;
height: 30px;
background-color: #eee;
border: 1px solid #ccc;
text-align: center;
font-size: 20px;
cursor: pointer;
}
/* 表格樣式 */
table {
border-collapse: collapse;
margin-bottom: 20px;
}
table td {
padding: 10px;
text-align: center;
border: 1px solid #ccc;
}

首先，我們需要在HTML中添加對應的元素結構：

商品名稱
-+

接下來，我們需要編寫相關的JavaScript代碼來實現增加數量的功能。

/*JavaScript代碼*/
// 獲取元素
var increaseBtn = document.querySelector('.increase-btn');
var decreaseBtn = document.querySelector('.decrease-btn');
var quantity = document.querySelector('.quantity');
// 增加數量
increaseBtn.addEventListener('click', function() {
var currentQuantity = parseInt(quantity.value);
quantity.value = currentQuantity + 1;
});
// 減少數量
decreaseBtn.addEventListener('click', function() {
var currentQuantity = parseInt(quantity.value);
if (currentQuantity >1) {
quantity.value = currentQuantity - 1;
}
});

至此，我們已經成功地使用CSS和JavaScript實現了增加商品數量的功能。在電商網站中使用此功能，將會大大提高用戶體驗，增加網站轉化率。