js html购物车完整代码
时间: 2024-07-11 11:01:22 浏览: 124
JavaScript 和 HTML 结合可以创建一个基本的购物车功能,这里我会给出一个简单的示例,但请注意这只是一个基础版本,并没有包括数据库交互或完整的前端设计。我们将用 JavaScript 来管理购物车的数据,HTML 用于展示和用户交互。
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>简单购物车</title>
<style>
.cart {
display: flex;
justify-content: space-between;
}
.item {
padding: 10px;
}
</style>
</head>
<body>
<h1>简易购物车</h1>
<!-- 商品列表 -->
<ul id="productList">
<li class="item" data-id="1">商品1 (价格: $10)</li>
<li class="item" data-id="2">商品2 (价格: $20)</li>
<li class="item" data-id="3">商品3 (价格: $30)</li>
</ul>
<!-- 购物车 -->
<div class="cart">
<p>已选商品:</p>
<ul id="cartItems"></ul>
<button onclick=" addToCart() ">添加到购物车</button>
<button onclick=" removeFromCart() ">从购物车移除</button>
<p>总价: <span id="totalPrice">0</span></p>
</div>
<script>
let cart = [];
const productList = document.getElementById('productList');
const cartItems = document.getElementById('cartItems');
const totalPrice = document.getElementById('totalPrice');
function addToCart() {
const selectedItems = productList.querySelectorAll('.item');
for(let item of selectedItems) {
if(item.dataset.id && !cart.includes(item)) {
cart.push(item);
updateCartItem(item);
updateTotalPrice();
}
}
}
function removeFromCart() {
for(let item of cart) {
if(item.parentElement === cartItems) {
cartItems.removeChild(item);
cart.splice(cart.indexOf(item), 1);
updateTotalPrice();
}
}
}
function updateCartItem(item) {
cartItems.appendChild(item.cloneNode(true));
}
function updateTotalPrice() {
let total = 0;
for(let item of cart) {
total += parseInt(item.textContent.match(/\d+/));
}
totalPrice.textContent = `总价: ${total}`;
}
// 示例:假设每个商品都有一个data-price属性
// 可以扩展获取动态数据的部分
// productList.addEventListener('click', event => {
// if(event.target.classList.contains('item')) {
// const price = event.target.dataset.price;
// console.log(`商品 ${event.target.innerText} 的价格: ${price}`);
// }
// });
</script>
</body>
</html>
```
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)