请给我一个简单的“商品交易系统”前端的源代码
时间: 2023-08-06 14:09:15 浏览: 41
以下是一个简单的“商品交易系统”前端的HTML/CSS/JavaScript代码示例：
HTML代码：
```html
<!DOCTYPE html>
<html>
<head>
<title>商品交易系统</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>商品交易系统</h1>
</header>
<main>
<section>
<h2>商品列表</h2>
<div id="goods-list"></div>
</section>
<section>
<h2>购物车</h2>
<div id="cart"></div>
<button id="checkout-btn">结算</button>
</section>
</main>
<footer>
<p>© 2021 商品交易系统</p>
</footer>
<script src="script.js"></script>
</body>
</html>
```
CSS代码：
```css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
header h1 {
margin: 0;
}
main {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 20px;
}
section {
flex: 0 1 45%;
margin-bottom: 20px;
}
section h2 {
margin-bottom: 10px;
}
#goods-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 20px;
}
.goods-item {
border: 1px solid #ddd;
padding: 10px;
text-align: center;
}
.goods-item img {
max-width: 100%;
max-height: 200px;
margin-bottom: 10px;
}
.goods-item h3 {
margin-bottom: 10px;
}
.goods-item p {
margin-bottom: 10px;
}
#cart {
border: 1px solid #ddd;
padding: 10px;
text-align: center;
}
#cart table {
width: 100%;
}
#cart table th, #cart table td {
padding: 5px;
border: 1px solid #ddd;
}
#checkout-btn {
display: block;
margin: 20px auto;
padding: 10px 20px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
}
footer {
background-color: #ddd;
padding: 20px;
text-align: center;
}
```
JavaScript代码：
```javascript
// 商品列表数据
const goodsData = [
{
id: 1,
name: '商品1',
description: '描述1',
price: 10.0,
quantity: 100,
image: 'https://via.placeholder.com/250x200.png?text=商品1',
},
{
id: 2,
name: '商品2',
description: '描述2',
price: 20.0,
quantity: 200,
image: 'https://via.placeholder.com/250x200.png?text=商品2',
},
{
id: 3,
name: '商品3',
description: '描述3',
price: 30.0,
quantity: 300,
image: 'https://via.placeholder.com/250x200.png?text=商品3',
},
];
// 购物车数据
let cartData = [];
// 获取商品列表DOM元素
const goodsListEl = document.getElementById('goods-list');
// 获取购物车DOM元素
const cartEl = document.getElementById('cart');
// 绘制商品列表
function drawGoodsList() {
goodsListEl.innerHTML = '';
goodsData.forEach(goods => {
const goodsItemEl = document.createElement('div');
goodsItemEl.classList.add('goods-item');
goodsItemEl.innerHTML = `
<img src="${goods.image}" alt="${goods.name}">
<h3>${goods.name}</h3>
<p>${goods.description}</p>
<p>价格：${goods.price}元</p>
<p>库存：${goods.quantity}</p>
<button onclick="addToCart(${goods.id})">加入购物车</button>
`;
goodsListEl.appendChild(goodsItemEl);
});
}
// 绘制购物车
function drawCart() {
cartEl.innerHTML = '';
const tableEl = document.createElement('table');
tableEl.innerHTML = `
<tr>
<th>商品名称</th>
<th>数量</th>
<th>单价</th>
<th>小计</th>
<th>操作</th>
</tr>
`;
let total = 0.0;
cartData.forEach(cartItem => {
const goods = goodsData.find(goods => goods.id === cartItem.id);
const subtotal = cartItem.quantity * goods.price;
total += subtotal;
const trEl = document.createElement('tr');
trEl.innerHTML = `
<td>${goods.name}</td>
<td>${cartItem.quantity}</td>
<td>${goods.price}元</td>
<td>${subtotal}元</td>
<td><button onclick="removeFromCart(${goods.id})">删除</button></td>
`;
tableEl.appendChild(trEl);
});
if (cartData.length === 0) {
tableEl.innerHTML += '<tr><td colspan="5">购物车为空</td></tr>';
}
else {
tableEl.innerHTML += `
<tr>
<td colspan="3">合计：</td>
<td>${total}元</td>
<td></td>
</tr>
`;
}
cartEl.appendChild(tableEl);
}
// 添加商品到购物车
function addToCart(goodsId) {
const cartItem = cartData.find(item => item.id === goodsId);
if (cartItem) {
cartItem.quantity += 1;
}
else {
cartData.push({ id: goodsId, quantity: 1 });
}
drawCart();
}
// 从购物车删除商品
function removeFromCart(goodsId) {
const cartItemIndex = cartData.findIndex(item => item.id === goodsId);
if (cartItemIndex >= 0) {
cartData.splice(cartItemIndex, 1);
}
drawCart();
}
// 结算
function checkout() {
alert('结算成功！');
cartData = [];
drawCart();
}
// 初始化
drawGoodsList();
drawCart();
document.getElementById('checkout-btn').addEventListener('click', checkout);
```
以上是一个简单的“商品交易系统”前端的HTML/CSS/JavaScript代码示例，您可以根据该示例进行编程实现。
相关推荐
最新推荐
前端-代码走查模板.docx
前端项目管理中不可少的一个环节就是代码走查。可以很好的约束开发方式，对齐组内开发风格
纯JS前端实现分页代码
先给大家展示下效果图，如果大家感觉效果不错，请参考实现代码： 因为这是我自己第一次动手用js写分页，写的应该也不是很完美，有些公共的没有抽取出来，但是用起来还是可以的，这块代码是可以把它当做公共的分页去...
商品库存管理系统（论文）.docx
因此，建立一个B/S结构的商品库存管理系统来管理教育平台信息，会使管理工作系统化、规范化，也会提高教育平台形象，提高管理效率。因此，根据以上的开发背景，本人设计并实现了商品库存管理系统来解决以上问题。 ...
pre_o_1csdn63m9a1bs0e1rr51niuu33e.a
pre_o_1csdn63m9a1bs0e1rr51niuu33e.a
zigbee-cluster-library-specification
最新的zigbee-cluster-library-specification说明文档。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
实现实时数据湖架构：Kafka与Hive集成
# 1. 实时数据湖架构概述**
实时数据湖是一种现代数据管理架构，它允许企业以低延迟的方式收集、存储和处理大量数据。与传统数据仓库不同，实时数据湖不依赖于预先定义的模式，而是采用灵活的架构，可以处理各种数据类型和格式。这种架构为企业提供了以下优势：
- **实时洞察：**实时数据湖允许企业访问最新的数据，从而做出更明智的决策。
- **数据民主化：**实时数据湖使各种利益相关者都可
2． 通过python绘制y=e-xsin(2πx)图像
可以使用matplotlib库来绘制这个函数的图像。以下是一段示例代码：
```python
import numpy as np
import matplotlib.pyplot as plt
def func(x):
return np.exp(-x) * np.sin(2 * np.pi * x)
x = np.linspace(0, 5, 500)
y = func(x)
plt.plot(x, y)
plt.xlabel('x')
plt.ylabel('y')
plt.title('y = e^{-x} sin(2πx)')
plt.show()
```
运行这段
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。
"互动学习：行动中的多样性与论文攻读经历"
多样性她- 事实上SCI NCES你的时间表ECOLEDO C Tora SC和NCESPOUR l’Ingén学习互动，互动学习以行动为中心的强化学习学会互动，互动学习，以行动为中心的强化学习计算机科学博士论文于2021年9月28日在Villeneuve d'Asq公开支持马修·瑟林评审团主席法布里斯·勒菲弗尔阿维尼翁大学教授论文指导奥利维尔·皮耶昆谷歌研究教授：智囊团论文联合主任菲利普·普雷教授，大学。里尔/CRISTAL/因里亚报告员奥利维耶·西格德索邦大学报告员卢多维奇·德诺耶教授，Facebook /索邦大学审查员越南圣迈IMT Atlantic高级讲师邀请弗洛里安·斯特鲁布博士，Deepmind对于那些及时看到自己错误的人...3谢谢你首先，我要感谢我的两位博士生导师Olivier和Philippe。奥利维尔，"站在巨人的肩膀上"这句话对你来说完全有意义了。从科学上讲，你知道在这篇论文的（许多）错误中，你是我可以依