!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF
-8">
<meta name="viewport" content="width=device
-width, initial
-scale=1.0">
<title>首页</title>
<
link rel="stylesheet" href="styles.css">
<!
-- 引入网站图标
-->
<
link rel="icon" href="C:\Users\lenovo\Pictures\黄子\0076wjjTly1hjti34wishj30si0sijtv.jpg">
<style>
body {
font
-family: Arial, sans
-serif;
margin: 0;
padding: 0;
}
/* 导航栏 */
header {
background
-color: #4CAF50;
color: white;
padding: 10px 20px;
text
-align: center;
}
nav {
display: flex;
justify
-content: sp
ace-between;
align
-items: center;
}
.logo a {
font
-size: 24px;
color: white;
text
-decoration: none;
}
.nav
-links {
list
-style
-type: none;
padding: 0;
margin: 0;
}
.nav
-links li {
display: inline;
margin
-left: 10px;
}
.nav
-links a {
color: white;
text
-decoration: none;
}
/* 商品展示区 */
.product
-grid {
display: flex;
gap: 20px;
flex
-wrap: wrap;
padding: 20px;
}
.product
-item {
border: 1px solid #ccc;
padding: 10px;
width: 200px;
text
-align: center;
}
.product
-item img {
max
-width: 100%;
height: auto;
}
/* 购物车 */
#cart {
margin
-top: 20px;
}
.logo img {
width: 50px; /* 设置 Logo 的宽度 */
height: auto; /* 保持宽高比例 */
}
#cart
-list {
list
-style
-type: none;
padding: 0;
}
#cart
-list li {
margin: 5px 0;
}
/* 页脚 */
footer {
text
-align: center;
padding: 10px;
background
-color: #f9f9f9;
margin
-top: 20px;
}
</style>
</head>
<body>
<!
-- 导航栏
-->
<header>
<nav>
<div class="logo">
<a href="index.html">
<img src="C:\Users\lenovo\Pictures\黄子\0076wjjTly1hjti34wishj30si0sijtv.jpg" alt="网站Logo">
</a>
</div>
<ul class="nav
-links">
<li><a href="index.html">首页</a></li>
<li><a href="cart.html">购物车(<span id="cart
-count">0</span>)</a></li>
</ul>
</nav>
</header>
<!
-- 商品展示区
-->
<main>
<section id="products">
<h2>商品列表</h2>
<div class="product
-grid">
<div class="product
-item" data
-category="novel">
<img src="https://tse4
-mm.cn.bing.net/th/id/OIP
-C.E1l9GHWnkbNLjcnJpqTpPAHaKC?rs=1&pid=ImgDetMain" alt="产品1">
<h3>产品1:红楼梦</h3>
<p>价格：$50</p>
<button onclick="addToCart('产品1:红楼梦', 50)">添加到购物车</button>
</div>
<div class="product
-item" data
-category="novel">
<img src="https://ts1.tc.mm.bing.net/th/id/R
-C.115539104325e27be2f0ee05ca4c080b?rik=xSg%2bwFfcC1%2b2QQ&riu=http%3a%2f%2fimages.bookuu.com%2fbook%2fC%2f01638%2f2634742
-fm.jpg&ehk=H9B6G0WCUFgsQjHJE1iAtNWwpFnhmdAg30ByUapdJfY%3d&risl=&pid=ImgRaw&r=0" alt="产品2">
<h3>产品2:西游记</h3>
<p>价格：$75</p>
<button onclick="addToCart('产品2:西游记', 75)">添加到购物车</button>
</div>
<div class="product
-item" data
-category="novel">
<img src="https://tse3
-mm.cn.bing.net/th/id/OIP
-C.3JrruqZy
-PznYJxAHsoUdAHaKe?rs=1&pid=ImgDetMain" alt="产品3">
<h3>产品3：水浒传</h3>
<p>价格：$100</p>
<button onclick="addToCart('产品3：水浒传', 100)">添加到购物车</button>
</div>
<div class="product
-item" data
-category="novel">
<img src="https://ts1.tc.mm.bing.net/th/id/R
-C.741a4e06
ace8ed3a2a47d2a7fc53efa6?rik=OTex%2bIz3NhB3vw&riu=http%3a%2f%2fsdwypress.com%2fuploads%2fimage%2f2106%2f24%2f210624143125esxhc.jpg&ehk=bJB%2f6p6aW7wkHHbCiUTcnRf%2bNLwOktGxYScy28rgjwg%3d&risl=&pid=ImgRaw&r=0" alt="产品2">
<h3>产品4：三国演义</h3>
<p>价格：$55</p>
<button onclick="addToCart('产品4：三国演义', 55)">添加到购物车</button>
</div>
<div class="product
-item" data
-category="novel">
<img src="https://tse1
-mm.cn.bing.net/th/id/OIP
-C.4tBovpeIT27lEOj0FuFT5QHaKu?rs=1&pid=ImgDetMain" alt="产品2">
<h3>产品5：红岩</h3>
<p>价格：$65</p>
<button onclick="addToCart('产品5：红岩', 65)">添加到购物车</button>
</div>
<div class="product
-item" data
-category="history">
<img src="https://tse4
-mm.cn.bing.net/th/id/OIP
-C.PgSOBNz_XC3Q2b_O9Nkh
-wHaLS?rs=1&pid=ImgDetMain" alt="产品2">
<h3>产品6：开放中的变迁</h3>
<p>价格：$50</p>
<button onclick="addToCart('产品6：开放中的变迁', 50)">添加到购物车</button>
</div>
<div class="product
-item" data
-category="history">
<img src="https://tse2
-mm.cn.bing.net/th/id/OIP
-C.1O2NDFn3NcQ5UtfKVUX9qwHaLD?rs=1&pid=ImgDetMain" alt="产品2">
<h3>产品7：中国近代史</h3>
<p>价格：$55</p>
<button onclick="addToCart('产品7：中国近代史', 55)">添加到购物车</button>
</div>
<div class="product
-item" data
-category="history">
<img src="https://img3.doubanio.com/lpic/s27258223.jpg" alt="产品2">
<h3>产品8：国史大纲</h3>
<p>价格：$65</p>
<button onclick="addToCart('产品8：国史大纲', 65)">添加到购物车</button>
</div>
<div class="product
-item" data
-category="science">
<img src="https://so1.360tres.com/t0151ae7fb7ec6d8870.jpg" alt="产品2">
<h3>产品9：时间简史</h3>
<p>价格：$65</p>
<button onclick="addToCart('产品9：时间简史', 65)">添加到购物车</button>
</div>
<div class="product
-item" data
-category="science">
<img src="https://img.alicdn.com/bao/uploaded/i1/3715517208/O1CN01yttyGV237JTlFwGhn_!!0
-item_pic.jpg" alt="产品2">
<h3>产品10：从一到无穷大：科学中的事实和臆测</h3>
<p>价格：$65</p>
<button onclick="addToCart('产品10：从一到无穷大：科学中的事实和臆测', 65)">添加到购物车</button>
</div>
</div>
</section>
<section id="cart">
<h2>购物车</h2>
<ul id="cart
-list"></ul>
<p>总价：<span id="total
-price">$0</span></p>
<button onclick="checkout()">结算</button>
</section>
</main>
<footer>
<p>© 2023 我的电商网站</p>
</footer>
<script>
let cart = [];
// 更新购物车数量
function updateCartCount() {
const count = cart.reduce((sum, item) => sum + item.quantity, 0);
document.getElementById('cart
-count').textContent = count;
}
// 添加商品到购物车
function addToCart(name, price) {
const existingItem = cart.find(item => item.name === name);
if (existingItem) {
existingItem.quantity += 1; // 如果商品已存在，增加数量
} else {
cart.push({ name, price, quantity: 1 }); // 否则新增商品
}
updateCart(); // 更新购物车显示
updateCartCount(); // 更新购物车数量
}
// 更新购物车显示
function updateCart() {
const cartList = document.getElementById('cart
-list');
const totalPriceElement = document.getElementById('total
-price');
// 清空购物车列表
cartList.innerHTML = '';
let totalPrice = 0;
// 遍历购物车中的商品并更新显示
cart.forEach((item, index) => {
const li = document.createElement('li');
li.textContent = `${item.name} x${item.quantity}
- $${item.price * item.quantity}`;
// 添加删除按钮
const deleteButton = document.createElement('button');
deleteButton.textContent = '删除';
deleteButton.onclick = () => removeFromCart(index); // 绑定删除事件
li.appendChild(deleteButton);
cartList.appendChild(li);
totalPrice += item.price * item.quantity;
});
// 更新总价
totalPriceElement.textContent = `$${totalPrice}`;
}
// 从购物车中移除商品
function removeFromCart(index) {
cart.splice(index, 1); // 根据索引移除商品
updateCart(); // 更新购物车显示
updateCartCount(); // 更新购物车数量
}
// 结算功能
function checkout() {
if (cart.length === 0) {
alert('购物车为空，请添加商品！');
} else {
alert(`您已成功结算！总价为：$${document.getElementById('total
-price').textContent}`);
cart = [];
updateCart();
updateCartCount();
}
}
</script>
</body>
</html>在购物车旁边加一个小logo
扫一扫
1032
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
