idea 编写购物功能页面代码展示
时间: 2023-07-29 20:07:47 浏览: 41
好的,以下是一个简单的购物功能页面代码展示,使用了 HTML、CSS 和 JavaScript:
HTML 代码:
```html
<div id="cart">
<h2>购物车</h2>
<ul id="cart-items"></ul>
<p id="total">总价: ¥0.00</p>
</div>
<div id="products">
<h2>商品列表</h2>
<ul>
<li data-name="T恤" data-price="50.00">T恤 - ¥50.00 <button class="add-to-cart">加入购物车</button></li>
<li data-name="牛仔裤" data-price="80.00">牛仔裤 - ¥80.00 <button class="add-to-cart">加入购物车</button></li>
<li data-name="运动鞋" data-price="120.00">运动鞋 - ¥120.00 <button class="add-to-cart">加入购物车</button></li>
<li data-name="手表" data-price="200.00">手表 - ¥200.00 <button class="add-to-cart">加入购物车</button></li>
</ul>
</div>
```
CSS 代码:
```css
#cart {
float: left;
width: 40%;
}
#products {
float: right;
width: 60%;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
margin-bottom: 10px;
}
.add-to-cart {
float: right;
}
```
JavaScript 代码:
```javascript
const cartItems = document.getElementById('cart-items');
const total = document.getElementById('total');
const addToCartButtons = document.querySelectorAll('.add-to-cart');
let cart = [];
addToCartButtons.forEach(button => {
button.addEventListener('click', () => {
const product = button.parentElement.dataset;
addToCart(product);
});
});
function addToCart(product) {
const existingItem = cart.find(item => item.name === product.name);
if (existingItem) {
existingItem.quantity += 1;
} else {
cart.push({ name: product.name, price: product.price, quantity: 1 });
}
updateCart();
}
function updateCart() {
cartItems.innerHTML = '';
let cartTotal = 0;
cart.forEach(item => {
const li = document.createElement('li');
li.innerText = `${item.name} x ${item.quantity} = ¥${item.price * item.quantity}`;
cartItems.appendChild(li);
cartTotal += item.price * item.quantity;
});
total.innerText = `总价: ¥${cartTotal.toFixed(2)}`;
}
```
这个代码展示了一个简单的购物功能页面,包括一个商品列表和一个购物车。用户可以点击商品列表中的“加入购物车”按钮,将商品加入购物车并显示在购物车中。购物车中显示了每个商品的名称、数量和总价,以及所有商品的总价。