实现简单的购物页面不需要依赖复杂的前端框架，仅使用HTML的基础标签就可以完成商品展示、数量选择、提交订单等核心功能，下面我们一步步完成整个页面的搭建。
页面整体结构设计
购物页面的核心结构可以分为三个部分：顶部导航栏、商品展示区、底部订单提交区。我们使用<header>、<main>、<footer>三个语义化标签来划分整体结构，代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单购物页面</title>
<style>
/* 基础样式，让页面更美观 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Microsoft YaHei", sans-serif;
}
header {
background-color: #f8f8f8;
padding: 20px;
text-align: center;
border-bottom: 1px solid #eee;
}
main {
max-width: 1200px;
margin: 20px auto;
padding: 0 20px;
}
.goods-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.goods-item {
border: 1px solid #eee;
border-radius: 8px;
padding: 15px;
text-align: center;
}
.goods-item img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 4px;
}
footer {
max-width: 1200px;
margin: 0 auto 20px;
padding: 20px;
border-top: 1px solid #eee;
}
.order-btn {
background-color: #ff4400;
color: white;
border: none;
padding: 12px 30px;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
float: right;
}
</style>
</head>
<body>
<header>
<h1>简易购物商城</h1>
</header>
<main>
<div class="goods-list">
<!-- 商品项会在这里添加 -->
</div>
</main>
<footer>
<!-- 订单提交区域会在这里添加 -->
</footer>
</body>
</html>
商品展示模块实现
商品展示区需要包含商品图片、名称、价格、数量选择控件，我们使用<div>包裹每个商品项，配合<img>展示图片，<p>展示商品信息，<input>实现数量选择功能，具体代码如下：
<!-- 单个商品项结构，可复制多个展示不同商品 -->
<div class="goods-item">
<img src="https://picsum.photos/300/200?random=2" alt="商品示例图片">
<h3>纯棉短袖T恤</h3>
<p>价格：<strong>89元</strong></p>
<p>
购买数量：
<input type="number" min="1" max="10" value="1" class="goods-count">
</p>
</div>
<div class="goods-item">
<img src="https://picsum.photos/300/200?random=3" alt="商品示例图片">
<h3>休闲运动裤</h3>
<p>价格：<strong>129元</strong></p>
<p>
购买数量：
<input type="number" min="1" max="10" value="1" class="goods-count">
</p>
</div>
订单提交区域实现
订单提交区需要展示已选商品的总价，同时提供提交订单的按钮，我们使用<form>标签包裹提交区域，方便后续扩展提交逻辑，同时使用<span>展示动态计算的总价，代码如下：
<form id="order-form">
<p>已选商品总价：<span id="total-price">0元</span></p>
<label for="username">收货人姓名：</label>
<input type="text" id="username" name="username" required placeholder="请输入收货人姓名">
<br><br>
<label for="address">收货地址：</label>
<input type="text" id="address" name="address" required placeholder="请输入收货地址">
<br><br>
<button type="submit" class="order-btn">提交订单</button>
</form>
基础交互逻辑添加
购物页面需要实时计算总价，我们可以通过JavaScript实现基础的计算逻辑，监听数量输入框的变化，自动更新总价显示，代码如下：
// 获取所有数量输入框
const countInputs = document.querySelectorAll('.goods-count');
// 获取总价显示元素
const totalPriceEl = document.getElementById('total-price');
// 商品价格映射，对应每个商品的价格
const goodsPriceMap = {
0: 89, // 第一个商品的价格
1: 129 // 第二个商品的价格
};
// 计算总价函数
function calculateTotal() {
let total = 0;
countInputs.forEach((input, index) => {
const count = parseInt(input.value) || 0;
total += count * goodsPriceMap[index];
});
totalPriceEl.textContent = total + '元';
}
// 给每个输入框添加输入事件监听
countInputs.forEach(input => {
input.addEventListener('input', calculateTotal);
});
// 初始计算一次总价
calculateTotal();
// 订单提交事件监听
document.getElementById('order-form').addEventListener('submit', function(e) {
e.preventDefault();
const username = document.getElementById('username').value;
const address = document.getElementById('address').value;
if (!username || !address) {
alert('请填写完整的收货信息');
return;
}
alert('订单提交成功，收货人：' + username + '，地址：' + address);
});
完整页面代码整合
将上面的所有代码整合到一起，就得到了一个完整的简单购物页面，完整代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单购物页面</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Microsoft YaHei", sans-serif;
}
header {
background-color: #f8f8f8;
padding: 20px;
text-align: center;
border-bottom: 1px solid #eee;
}
main {
max-width: 1200px;
margin: 20px auto;
padding: 0 20px;
}
.goods-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.goods-item {
border: 1px solid #eee;
border-radius: 8px;
padding: 15px;
text-align: center;
}
.goods-item img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 4px;
}
footer {
max-width: 1200px;
margin: 0 auto 20px;
padding: 20px;
border-top: 1px solid #eee;
}
.order-btn {
background-color: #ff4400;
color: white;
border: none;
padding: 12px 30px;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
float: right;
}
.goods-count {
width: 60px;
padding: 5px;
text-align: center;
}
#order-form label {
display: inline-block;
width: 100px;
text-align: right;
margin-right: 10px;
}
#order-form input[type="text"] {
padding: 8px;
width: 300px;
}
</style>
</head>
<body>
<header>
<h1>简易购物商城</h1>
</header>
<main>
<div class="goods-list">
<div class="goods-item">
<img src="https://picsum.photos/300/200?random=2" alt="商品示例图片">
<h3>纯棉短袖T恤</h3>
<p>价格：<strong>89元</strong></p>
<p>
购买数量：
<input type="number" min="1" max="10" value="1" class="goods-count">
</p>
</div>
<div class="goods-item">
<img src="https://picsum.photos/300/200?random=3" alt="商品示例图片">
<h3>休闲运动裤</h3>
<p>价格：<strong>129元</strong></p>
<p>
购买数量：
<input type="number" min="1" max="10" value="1" class="goods-count">
</p>
</div>
</div>
</main>
<footer>
<form id="order-form">
<p>已选商品总价：<span id="total-price">0元</span></p>
<label for="username">收货人姓名：</label>
<input type="text" id="username" name="username" required placeholder="请输入收货人姓名">
<br><br>
<label for="address">收货地址：</label>
<input type="text" id="address" name="address" required placeholder="请输入收货地址">
<br><br>
<button type="submit" class="order-btn">提交订单</button>
</form>
</footer>
<script>
const countInputs = document.querySelectorAll('.goods-count');
const totalPriceEl = document.getElementById('total-price');
const goodsPriceMap = {
0: 89,
1: 129
};
function calculateTotal() {
let total = 0;
countInputs.forEach((input, index) => {
const count = parseInt(input.value) || 0;
total += count * goodsPriceMap[index];
});
totalPriceEl.textContent = total + '元';
}
countInputs.forEach(input => {
input.addEventListener('input', calculateTotal);
});
calculateTotal();
document.getElementById('order-form').addEventListener('submit', function(e) {
e.preventDefault();
const username = document.getElementById('username').value;
const address = document.getElementById('address').value;
if (!username || !address) {
alert('请填写完整的收货信息');
return;
}
alert('订单提交成功，收货人：' + username + '，地址：' + address);
});
</script>
</body>
</html>
注意事项
以上实现的是纯静态的简单购物页面，仅具备基础的前端展示和本地计算功能，如果要实现真实的购物流程，还需要对接后端接口完成数据存储、支付对接等功能。另外页面中的商品图片使用的是随机图片服务，实际使用时可以替换成自己的商品图片地址，数量输入框的max属性可以根据库存情况调整，避免用户选择超过库存的数量。