js基础案例商城
时间: 2023-07-23 20:05:27 浏览: 59
好的,这里为您提供一个简单的JS基础案例商城:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>JS基础案例商城</title>
</head>
<body>
<h1>JS基础案例商城</h1>
<h2>商品列表</h2>
<ul id="product-list">
<li>
<span class="product-name">商品1</span>
<span class="product-price">10元</span>
<button class="add-to-cart">加入购物车</button>
</li>
<li>
<span class="product-name">商品2</span>
<span class="product-price">20元</span>
<button class="add-to-cart">加入购物车</button>
</li>
<li>
<span class="product-name">商品3</span>
<span class="product-price">30元</span>
<button class="add-to-cart">加入购物车</button>
</li>
</ul>
<h2>购物车</h2>
<ul id="cart">
</ul>
<h2>总价</h2>
<div id="total-price">0元</div>
<script src="script.js"></script>
</body>
</html>
```
JavaScript代码:
```
// 获取商品列表
const productList = document.getElementById('product-list');
// 获取购物车
const cart = document.getElementById('cart');
// 获取总价
const totalPrice = document.getElementById('total-price');
// 初始化总价为0元
let total = 0;
// 遍历商品列表中的每个商品
productList.querySelectorAll('li').forEach(function(product) {
// 获取商品名称
const name = product.querySelector('.product-name').textContent;
// 获取商品价格
const priceText = product.querySelector('.product-price').textContent;
const price = parseFloat(priceText);
// 获取加入购物车按钮
const addToCartButton = product.querySelector('.add-to-cart');
// 为加入购物车按钮添加点击事件
addToCartButton.addEventListener('click', function() {
// 创建一个新的购物车项
const cartItem = document.createElement('li');
const cartItemName = document.createElement('span');
cartItemName.textContent = name;
const cartItemPrice = document.createElement('span');
cartItemPrice.textContent = priceText;
const cartItemRemoveButton = document.createElement('button');
cartItemRemoveButton.textContent = '删除';
cartItemRemoveButton.addEventListener('click', function() {
// 删除购物车项时同时减去总价
total -= price;
totalPrice.textContent = total + '元';
cart.removeChild(cartItem);
});
cartItem.appendChild(cartItemName);
cartItem.appendChild(cartItemPrice);
cartItem.appendChild(cartItemRemoveButton);
// 将购物车项加入购物车
cart.appendChild(cartItem);
// 加上购物车项的价格
total += price;
totalPrice.textContent = total + '元';
});
});
```
这个案例商城包括了商品列表、购物车和总价三个部分。当用户点击商品列表中的加入购物车按钮时,会将商品名称、价格和一个删除按钮一起加入购物车中,并且总价会相应地增加。如果用户点击购物车中的删除按钮,则会将购物车项从购物车中删除,并且总价会减少相应的价格。
相关推荐
![txt](https://img-home.csdnimg.cn/images/20210720083642.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)