编写一个购物车的完整代码,用css美化,要求使用+,-按钮改变数量,用中文,并加上注释
时间: 2024-03-08 20:50:37 浏览: 37
由于购物车的实现方式不同,这里提供一个简单的实现方式,仅供参考:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>购物车</h1>
<table>
<thead>
<tr>
<th>商品</th>
<th>价格</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>商品1</td>
<td>100元</td>
<td>
<button class="minus">-</button>
<span class="count">1</span>
<button class="plus">+</button>
</td>
<td>100元</td>
<td><button class="delete">删除</button></td>
</tr>
<tr>
<td>商品2</td>
<td>200元</td>
<td>
<button class="minus">-</button>
<span class="count">1</span>
<button class="plus">+</button>
</td>
<td>200元</td>
<td><button class="delete">删除</button></td>
</tr>
<tr>
<td>商品3</td>
<td>300元</td>
<td>
<button class="minus">-</button>
<span class="count">1</span>
<button class="plus">+</button>
</td>
<td>300元</td>
<td><button class="delete">删除</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">合计:</td>
<td>600元</td>
<td></td>
</tr>
</tfoot>
</table>
</body>
</html>
```
CSS代码:
```css
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
margin: 20px 0;
}
table {
width: 100%;
border-collapse: collapse;
}
th {
background-color: #eee;
padding: 10px;
text-align: left;
}
td {
padding: 5px;
text-align: center;
}
td button {
background-color: #ddd;
border: none;
padding: 5px 10px;
cursor: pointer;
}
td button:hover {
background-color: #ccc;
}
td span.count {
padding: 5px 10px;
}
tfoot td {
font-weight: bold;
}
/* +, - 按钮样式 */
td button.plus,
td button.minus {
display: inline-block;
background-color: #eee;
border: none;
padding: 5px 10px;
cursor: pointer;
}
td button.plus:hover,
td button.minus:hover {
background-color: #ddd;
}
td button.plus {
border-radius: 5px 0 0 5px;
}
td button.minus {
border-radius: 0 5px 5px 0;
}
/* 删除按钮样式 */
td button.delete {
color: #fff;
background-color: #f00;
border-radius: 5px;
}
td button.delete:hover {
background-color: #f55;
}
```
JS代码:
```javascript
// 获取所有 + 按钮
var plusBtns = document.querySelectorAll('.plus');
// 获取所有 - 按钮
var minusBtns = document.querySelectorAll('.minus');
// 获取所有 删除 按钮
var deleteBtns = document.querySelectorAll('.delete');
// 获取所有 数量 标签
var countTags = document.querySelectorAll('.count');
// 注册 + 按钮点击事件
for (var i = 0; i < plusBtns.length; i++) {
plusBtns[i].addEventListener('click', function() {
// 获取数量标签
var count = parseInt(this.parentNode.querySelector('.count').textContent);
// 数量 +1
count++;
// 更新数量标签
this.parentNode.querySelector('.count').textContent = count;
// 更新小计
updateSubtotal(this.parentNode.parentNode);
});
}
// 注册 - 按钮点击事件
for (var i = 0; i < minusBtns.length; i++) {
minusBtns[i].addEventListener('click', function() {
// 获取数量标签
var count = parseInt(this.parentNode.querySelector('.count').textContent);
// 数量 -1
count--;
// 数量不能小于 1
if (count < 1) {
count = 1;
}
// 更新数量标签
this.parentNode.querySelector('.count').textContent = count;
// 更新小计
updateSubtotal(this.parentNode.parentNode);
});
}
// 注册 删除 按钮点击事件
for (var i = 0; i < deleteBtns.length; i++) {
deleteBtns[i].addEventListener('click', function() {
// 获取当前行
var tr = this.parentNode.parentNode;
// 获取小计
var subtotal = parseFloat(tr.querySelector('td:nth-child(4)').textContent);
// 更新合计
updateTotal(-subtotal);
// 删除当前行
tr.parentNode.removeChild(tr);
});
}
// 更新小计
function updateSubtotal(tr) {
// 获取价格
var price = parseFloat(tr.querySelector('td:nth-child(2)').textContent);
// 获取数量
var count = parseInt(tr.querySelector('.count').textContent);
// 计算小计
var subtotal = price * count;
// 更新小计标签
tr.querySelector('td:nth-child(4)').textContent = subtotal.toFixed(2);
// 更新合计
updateTotal(subtotal);
}
// 更新合计
function updateTotal(amount) {
// 获取合计标签
var totalTag = document.querySelector('tfoot td:nth-child(4)');
// 获取合计金额
var total = parseFloat(totalTag.textContent);
// 更新合计金额
total += amount;
// 更新合计标签
totalTag.textContent = total.toFixed(2);
}
```
这个实现方式基于 HTML、CSS 和 JavaScript,通过对 +、- 按钮和删除按钮的点击事件进行响应,实现了购物车功能。在其中,`updateSubtotal` 函数用于更新小计,`updateTotal` 函数用于更新合计。购物车样式使用了 CSS 进行美化。
相关推荐
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)