从头构建一个全栈电子商务网站
来自 Wikiprompt,自由的提示词百科全书
从头构建一个全栈电子商务网站 生成一个完整、响应式电商网站的全面提示,使用HTML/CSS/JavaScript,包含产品搜索、购物车、结算和现代UI设计等功能。
提示词内容收藏
🌐
<!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: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
body {
background: #f8fafc;
color: #0f172a;
line-height: 1.5;
scroll-behavior: smooth;
}
img {
display: block;
max-width: 100%;
object-fit: cover;
}
button {
cursor: pointer;
border: none;
background: none;
font: inherit;
}
a {
text-decoration: none;
color: inherit;
}
/* 通用容器 */
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 1.5rem;
}
/* 头部导航 */
.navbar {
background: #ffffff;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
position: sticky;
top: 0;
z-index: 1000;
padding: 0.8rem 0;
}
.nav-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
}
.logo {
font-size: 1.8rem;
font-weight: 800;
letter-spacing: -0.5px;
background: linear-gradient(135deg, #2563eb, #7c3aed);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.nav-links {
display: flex;
align-items: center;
gap: 1.8rem;
font-weight: 500;
}
.nav-links a {
transition: color 0.2s;
}
.nav-links a:hover {
color: #2563eb;
}
.nav-actions {
display: flex;
align-items: center;
gap: 0.8rem;
}
.search-box {
display: flex;
align-items: center;
background: #f1f5f9;
border-radius: 40px;
padding: 0.3rem 0.8rem;
gap: 0.4rem;
}
.search-box input {
border: none;
background: transparent;
padding: 0.4rem;
width: 140px;
outline: none;
font-size: 0.9rem;
}
.cart-btn, .login-btn {
background: #ffffff;
border: 1px solid #e2e8f0;
padding: 0.5rem 1rem;
border-radius: 40px;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.4rem;
transition: all 0.2s;
}
.cart-btn:hover, .login-btn:hover {
background: #f1f5f9;
border-color: #2563eb;
}
.cart-count {
background: #2563eb;
color: white;
border-radius: 50%;
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 700;
}
.hamburger {
display: none;
flex-direction: column;
gap: 5px;
background: transparent;
}
.hamburger span {
width: 28px;
height: 3px;
background: #0f172a;
border-radius: 4px;
}
/* 移动端菜单 */
.mobile-menu {
display: none;
flex-direction: column;
background: white;
padding: 1rem 1.5rem;
gap: 1rem;
border-top: 1px solid #e2e8f0;
}
.mobile-menu.open {
display: flex;
}
/* Hero */
.hero {
background: linear-gradient(145deg, #dbeafe 0%, #ede9fe 100%);
border-radius: 2rem;
margin: 2rem auto;
padding: 3rem 2rem;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 2rem;
}
.hero-content h1 {
font-size: 3rem;
font-weight: 800;
line-height: 1.2;
margin-bottom: 1rem;
}
.hero-content p {
font-size: 1.1rem;
color: #334155;
margin-bottom: 2rem;
max-width: 500px;
}
.btn-primary {
background: #2563eb;
color: white;
padding: 0.9rem 2.2rem;
border-radius: 60px;
font-weight: 600;
font-size: 1rem;
transition: 0.2s;
box-shadow: 0 8px 20px rgba(37, 99, 235, 0.2);
}
.btn-primary:hover {
background: #1d4ed8;
transform: translateY(-2px);
}
.hero-image img {
max-width: 400px;
border-radius: 2rem;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
/* 分类卡片 */
.section-title {
font-size: 2rem;
font-weight: 700;
margin: 2.5rem 0 1.5rem;
letter-spacing: -0.02em;
}
.category-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 1.5rem;
}
.category-card {
background: white;
border-radius: 1.5rem;
padding: 1.5rem 1rem;
text-align: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
transition: all 0.2s;
border: 1px solid #f1f5f9;
}
.category-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
}
.category-card .emoji {
font-size: 2.5rem;
margin-bottom: 0.5rem;
}
.category-card h3 {
font-weight: 600;
}
/* 产品卡片 */
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1.8rem;
}
.product-card {
background: white;
border-radius: 1.5rem;
padding: 1.2rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
transition: 0.2s;
border: 1px solid #eef2f7;
display: flex;
flex-direction: column;
}
.product-card:hover {
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.06);
transform: translateY(-4px);
}
.product-image {
width: 100%;
height: 180px;
border-radius: 1rem;
background: #f1f5f9;
margin-bottom: 1rem;
object-fit: cover;
}
.product-name {
font-weight: 600;
font-size: 1.1rem;
margin-bottom: 0.3rem;
}
.rating {
color: #f59e0b;
font-size: 0.9rem;
margin-bottom: 0.6rem;
}
.price-row {
display: flex;
align-items: center;
gap: 0.6rem;
margin-bottom: 1rem;
}
.original-price {
text-decoration: line-through;
color: #94a3b8;
font-size: 0.9rem;
}
.discounted-price {
font-weight: 700;
font-size: 1.3rem;
color: #0f172a;
}
.discount-badge {
background: #dc2626;
color: white;
padding: 0.2rem 0.6rem;
border-radius: 30px;
font-size: 0.75rem;
font-weight: 600;
}
.card-actions {
display: flex;
gap: 0.5rem;
margin-top: auto;
}
.btn-add-cart, .btn-buy {
flex: 1;
padding: 0.6rem;
border-radius: 40px;
font-weight: 600;
font-size: 0.9rem;
transition: 0.2s;
}
.btn-add-cart {
background: #eef2ff;
color: #2563eb;
}
.btn-add-cart:hover {
background: #dbeafe;
}
.btn-buy {
background: #2563eb;
color: white;
}
.btn-buy:hover {
background: #1d4ed8;
}
.wishlist-btn {
background: #f1f5f9;
border-radius: 50%;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
transition: 0.2s;
}
.wishlist-btn.active {
background: #fee2e2;
color: #dc2626;
}
/* 购物车/结算区域 */
.cart-section {
background: white;
border-radius: 2rem;
padding: 2rem;
margin: 2rem 0;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}
.cart-items {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 1.5rem;
}
.cart-item {
display: flex;
align-items: center;
gap: 1rem;
border-bottom: 1px solid #f1f5f9;
padding-bottom: 1rem;
}
.cart-item img {
width: 70px;
height: 70px;
border-radius: 0.8rem;
}
.cart-item-info {
flex: 1;
}
.qty-control {
display: flex;
align-items: center;
gap: 0.5rem;
}
.qty-btn {
background: #f1f5f9;
width: 28px;
height: 28px;
border-radius: 50%;
font-weight: 700;
}
.cart-total {
display: flex;
justify-content: space-between;
font-size: 1.2rem;
font-weight: 600;
margin-top: 1rem;
}
.checkout-form {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-top: 2rem;
}
.checkout-form input, .checkout-form select {
padding: 0.8rem 1rem;
border: 1px solid #e2e8f0;
border-radius: 0.8rem;
width: 100%;
background: #f8fafc;
}
.btn-place-order {
background: #16a34a;
color: white;
padding: 1rem;
border-radius: 60px;
font-weight: 700;
font-size: 1.1rem;
margin-top: 1.5rem;
width: 100%;
transition: 0.2s;
}
.btn-place-order:hover {
background: #15803d;
}
/* 特殊区块 */
.special-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin: 2rem 0;
}
.special-card {
background: white;
padding: 1.5rem;
border-radius: 1.5rem;
text-align: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}
.newsletter {
background: #1e293b;
color: white;
border-radius: 2rem;
padding: 2.5rem;
text-align: center;
margin: 2rem 0;
}
.newsletter input {
padding: 0.9rem 1.2rem;
border-radius: 60px;
border: none;
width: 280px;
max-width: 80%;
}
.newsletter button {
background: #2563eb;
color: white;
padding: 0.9rem 2rem;
border-radius: 60px;
margin-left: 0.5rem;
}
/* 页脚 */
.footer {
background: #0f172a;
color: #cbd5e1;
padding: 3rem 0;
margin-top: 3rem;
border-radius: 2rem 2rem 0 0;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 2rem;
}
.footer a {
color: #cbd5e1;
display: block;
margin: 0.4rem 0;
}
.footer a:hover {
color: white;
}
.social-icons {
display: flex;
gap: 1rem;
font-size: 1.5rem;
}
/* 响应式 */
@media (max-width: 900px) {
.nav-links, .search-box {
display: none;
}
.hamburger {
display: flex;
}
.nav-wrapper {
flex-wrap: wrap;
}
.mobile-menu {
width: 100%;
}
.hero {
flex-direction: column;
text-align: center;
}
.hero-content h1 {
font-size: 2.2rem;
}
}
@media (max-width: 600px) {
.container {
padding: 0 1rem;
}
.product-grid {
grid-template-columns: 1fr 1fr;
}
.cart-item {
flex-wrap: wrap;
}
}
/* 辅助 */
.hidden {
display: none !important;
}
.toast {
position: fixed;
bottom: 20px;
right: 20px;
background: #0f172a;
color: white;
padding: 1rem 1.5rem;
border-radius: 40px;
font-weight: 500;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
z-index: 9999;
transition: 0.3s;
}
</style>
</head>
<body>
<!-- 导航 -->
<nav class="navbar">
<div class="container nav-wrapper">
<div class="logo">悦选商城</div>
<div class="nav-links">
<a href="#">首页</a>
<a href="#shop">商店</a>
<a href="#categories">分类</a>
<a href="#">关于</a>
<a href="#">联系</a>
</div>
<div class="nav-actions">
<div class="search-box">
<input type="text" id="searchInput" placeholder="搜索商品...">
<span>🔍</span>
</div>
<button class="cart-btn" id="cartBtn">🛒 <span class="cart-count" id="cartCount">0</span></button>
<button class="login-btn">登录</button>
<button class="hamburger" id="hamburgerBtn">
<span></span><span></span><span></span>
</button>
</div>
</div>
<div class="mobile-menu" id="mobileMenu">
<a href="#">首页</a>
<a href="#shop">商店</a>
<a href="#categories">分类</a>
<a href="#">关于</a>
<a href="#">联系</a>
<div class="search-box" style="display: flex;">
<input type="text" id="mobileSearchInput" placeholder="搜索...">
<span>🔍</span>
</div>
</div>
</nav>
<div class="container">
<!-- Hero -->
<section class="hero">
<div class="hero-content">
<h1>夏日焕新季<br>潮流单品低至5折</h1>
<p>精选电子、时尚、美妆好物,品质生活一键抵达。</p>
<button class="btn-primary" onclick="document.getElementById('shop').scrollIntoView()">立即选购</button>
</div>
<div class="hero-image">
<img src="https://images.unsplash.com/photo-1607082349566-187342175e2f?w=400&auto=format&fit=crop" alt="促销">
</div>
</section>
<!-- 分类 -->
<section id="categories">
<h2 class="section-title">热门分类</h2>
<div class="category-grid">
<div class="category-card" data-category="electronics"><span class="emoji">📱</span><h3>电子</h3></div>
<div class="category-card" data-category="fashion"><span class="emoji">👗</span><h3>时尚</h3></div>
<div class="category-card" data-category="shoes"><span class="emoji">👟</span><h3>鞋履</h3></div>
<div class="category-card" data-category="accessories"><span class="emoji">⌚</span><h3>配饰</h3></div>
<div class="category-card" data-category="beauty"><span class="emoji">💄</span><h3>美妆</h3></div>
<div class="category-card" data-category="home"><span class="emoji">🛋️</span><h3>家居</h3></div>
</div>
</section>
<!-- 商品区域 -->
<section id="shop">
<h2 class="section-title">精选商品</h2>
<div style="display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem;">
<select id="categoryFilter">
<option value="all">全部分类</option>
<option value="electronics">电子</option>
<option value="fashion">时尚</option>
<option value="shoes">鞋履</option>
<option value="accessories">配饰</option>
<option value="beauty">美妆</option>
<option value="home">家居</option>
</select>
<select id="sortSelect">
<option value="default">默认排序</option>
<option value="price-asc">价格 ↑</option>
<option value="price-desc">价格 ↓</option>
<option value="rating">评分</option>
</select>
</div>
<div class="product-grid" id="productGrid"></div>
</section>
<!-- 购物车 & 结算 -->
<section class="cart-section" id="cartSection">
<h2 style="margin-bottom: 1rem;">🛒 购物车</h2>
<div id="cartItems" class="cart-items"></div>
<div class="cart-total">
<span>总计</span>
<span id="cartTotal">¥0</span>
</div>
<button id="clearCartBtn" style="background: #fee2e2; color:#b91c1c; padding:0.5rem 1.2rem; border-radius:40px; margin-top:0.5rem;">清空购物车</button>
<h3 style="margin: 2rem 0 1rem;">📦 结算信息</h3>
<form class="checkout-form" id="checkoutForm">
<input type="text" placeholder="姓名" id="custName" required>
<input type="email" placeholder="邮箱" id="custEmail" required>
<input type="tel" placeholder="电话" id="custPhone" required>
<input type="text" placeholder="地址" id="custAddress" required>
<input type="text" placeholder="城市" id="custCity" required>
<input type="text" placeholder="州/省" id="custState" required>
<input type="text" placeholder="邮编" id="custPin" required>
<select id="paymentMethod">
<option value="credit">信用卡</option>
<option value="paypal">PayPal</option>
<option value="cod">货到付款</option>
</select>
<button type="submit" class="btn-place-order">提交订单</button>
</form>
</section>
<!-- 特殊区块 -->
<div class="special-grid">
<div class="special-card">⚡ 限时闪购<br><small>低至3折</small></div>
<div class="special-card">🏆 畅销榜单<br><small>人气之选</small></div>
<div class="special-card">✨ 新品首发<br><small>抢先拥有</small></div>
<div class="special-card">💬 顾客好评<br><small>4.9/5 平均</small></div>
</div>
<!-- 客户评价 -->
<div style="background: white; border-radius: 2rem; padding: 2rem; margin: 2rem 0;">
<h3>⭐ 真实评价</h3>
<p>“品质超棒,物流很快!” - 小美</p>
<p>“设计很现代,购物体验一流。” - 阿杰</p>
</div>
<!-- 订阅 -->
<div class="newsletter">
<h3>订阅获取专属优惠</h3>
<input type="email" placeholder="你的邮箱" id="newsletterEmail">
<button onclick="alert('感谢订阅!')">订阅</button>
</div>
</div>
<!-- 页脚 -->
<footer class="footer">
<div class="container footer-grid">
<div>
<h4>悦选商城</h4>
<p>精选全球好物,品质生活。</p>
</div>
<div>
<h4>快速链接</h4>
<a href="#">首页</a><a href="#">商店</a><a href="#">分类</a>
</div>
<div>
<h4>客户支持</h4>
<a href="#">常见问题</a><a href="#">退换货</a><a href="#">配送</a>
</div>
<div>
<h4>隐私与条款</h4>
<a href="#">隐私政策</a><a href="#">条款</a>
</div>
<div class="social-icons">
<span>📘</span><span>📸</span><span>🐦</span>
</div>
</div>
<p style="text-align:center; margin-top:2rem;">© 2025 悦选商城</p>
</footer>
<script>
// ---------- 商品数据 ----------
const products = [
{ id: 1, name: '无线降噪耳机', category: 'electronics', price: 299, oldPrice: 499, rating: 4.8, img: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=200&auto=format&fit=crop' },
{ id: 2, name: '经典小白鞋', category: 'shoes', price: 199, oldPrice: 399, rating: 4.5, img: 'https://images.unsplash.com/photo-1549298916-b41d501d3772?w=200&auto=format&fit=crop' },
{ id: 3, name: '极简手表', category: 'accessories', price: 159, oldPrice: 259, rating: 4.3, img: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=200&auto=format&fit=crop' },
{ id: 4, name: '保湿精华液', category: 'beauty', price: 89, oldPrice: 150, rating: 4.7, img: 'https://images.unsplash.com/photo-1620916566398-39f1143ab7be?w=200&auto=format&fit=crop' },
{ id: 5, name: '北欧风台灯', category: 'home', price: 129, oldPrice: 199, rating: 4.2, img: 'https://images.unsplash.com/photo-1507473885765-e6ed057f782c?w=200&auto=format&fit=crop' },
{ id: 6, name: '棉麻衬衫', category: 'fashion', price: 149, oldPrice: 249, rating: 4.6, img: 'https://images.unsplash.com/photo-1598033129183-c4f50c736f10?w=200&auto=format&fit=crop' },
{ id: 7, name: '智能手环', category: 'electronics', price: 249, oldPrice: 329, rating: 4.4, img: 'https://images.unsplash.com/photo-1575311373937-040b8e1fd5b6?w=200&auto=format&fit=crop' },
{ id: 8, name: '真皮手提包', category: 'fashion', price: 399, oldPrice: 599, rating: 4.9, img: 'https://images.unsplash.com/photo-1584917865442-de89df76afd3?w=200&auto=format&fit=crop' },
];
// 购物车状态
let cart = [];
// 渲染商品
function renderProducts(filter = 'all', sort = 'default', search = '') {
let list = products.filter(p => {
const catMatch = filter === 'all' || p.category === filter;
const searchMatch = p.name.toLowerCase().includes(search.toLowerCase());
return catMatch && searchMatch;
});
if (sort === 'price-asc') list.sort((a,b) => a.price - b.price);
if (sort === 'price-desc') list.sort((a,b) => b.price - a.price);
if (sort === 'rating') list.sort((a,b) => b.rating - a.rating);
const grid = document.getElementById('productGrid');
grid.innerHTML = list.map(p => {
const discount = Math.round((1 - p.price / p.oldPrice) * 100);
return `
<div class="product-card" data-id="${p.id}">
<img src="${p.img}" alt="${p.name}" class="product-image">
<div class="product-name">${p.name}</div>
<div class="rating">⭐ ${p.rating}</div>
<div class="price-row">
<span class="discounted-price">¥${p.price}</span>
<span class="original-price">¥${p.oldPrice}</span>
<span class="discount-badge">-${discount}%</span>
</div>
<div class="card-actions">
<button class="btn-add-cart" onclick="addToCart(${p.id})">加入购物车</button>
<button class="btn-buy" onclick="buyNow(${p.id})">立即购买</button>
<button class="wishlist-btn" onclick="toggleWishlist(this)">🤍</button>
</div>
</div>
`;
}).join('');
}
// 加入购物车
function addToCart(id) {
const product = products.find(p => p.id === id);
const existing = cart.find(item => item.id === id);
if (existing) {
existing.qty++;
} else {
cart.push({ ...product, qty: 1 });
}
updateCartUI();
showToast(`${product.name} 已加入购物车`);
}
// 立即购买
function buyNow(id) {
addToCart(id);
document.getElementById('cartSection').scrollIntoView({ behavior: 'smooth' });
}
// 更新购物车UI
function updateCartUI() {
const container = document.getElementById('cartItems');
const totalEl = document.getElementById('cartTotal');
const countEl = document.getElementById('cartCount');
let total = 0;
let count = 0;
if (cart.length === 0) {
container.innerHTML = '<p style="color:#64748b;">购物车是空的</p>';
} else {
container.innerHTML = cart.map(item => {
total += item.price * item.qty;
count += item.qty;
return `
<div class="cart-item" data-id="${item.id}">
<img src="${item.img}" width="60">
<div class="cart-item-info">
<strong>${item.name}</strong>
<div>¥${item.price}</div>
<div class="qty-control">
<button class="qty-btn" onclick="changeQty(${item.id}, -1)">−</button>
<span>${item.qty}</span>
<button class="qty-btn" onclick="changeQty(${item.id}, 1)">+</button>
</div>
</div>
<button onclick="removeFromCart(${item.id})" style="color:#dc2626;">✕</button>
</div>
`;
}).join('');
}
totalEl.textContent = `¥${total}`;
countEl.textContent = count;
}
// 数量调整
function changeQty(id, delta) {
const item = cart.find(i => i.id === id);
if (!item) return;
item.qty += delta;
if (item.qty <= 0) {
cart = cart.filter(i => i.id !== id);
}
updateCartUI();
}
function removeFromCart(id) {
cart = cart.filter(i => i.id !== id);
updateCartUI();
}
// 清空购物车
document.getElementById('clearCartBtn').addEventListener('click', () => {
cart = [];
updateCartUI();
});
// 筛选/排序/搜索
document.getElementById('categoryFilter').addEventListener('change', (e) => {
renderProducts(e.target.value, document.getElementById('sortSelect').value, document.getElementById('searchInput').value);
});
document.getElementById('sortSelect').addEventListener('change', (e) => {
renderProducts(document.getElementById('categoryFilter').value, e.target.value, document.getElementById('searchInput').value);
});
document.getElementById('searchInput').addEventListener('input', (e) => {
renderProducts(document.getElementById('categoryFilter').value, document.getElementById('sortSelect').value, e.target.value);
});
document.getElementById('mobileSearchInput').addEventListener('input', (e) => {
document.getElementById('searchInput').value = e.target.value;
renderProducts(document.getElementById('categoryFilter').value, document.getElementById('sortSelect').value, e.target.value);
});
// 分类卡片点击筛选
document.querySelectorAll('.category-card').forEach(card => {
card.addEventListener('click', () => {
const cat = card.dataset.category;
document.getElementById('categoryFilter').value = cat;
renderProducts(cat, document.getElementById('sortSelect').value, document.getElementById('searchInput').value);
});
});
// 心愿单
function toggleWishlist(btn) {
btn.classList.toggle('active');
btn.textContent = btn.classList.contains('active') ? '❤️' : '🤍';
}
// 移动端菜单
document.getElementById('hamburgerBtn').addEventListener('click', () => {
document.getElementById('mobileMenu').classList.toggle('open');
});
// 结算验证
document.getElementById('checkoutForm').addEventListener('submit', (e) => {
e.preventDefault();
const name = document.getElementById('custName').value.trim();
const email = document.getElementById('custEmail').value.trim();
const phone = document.getElementById('custPhone').value.trim();
const address = document.getElementById('custAddress').value.trim();
const city = document.getElementById('custCity').value.trim();
const state = document.getElementById('custState').value.trim();
const pin = document.getElementById('custPin').value.trim();
if (!name || !email || !phone || !address || !city || !state || !pin) {
alert('请填写所有必填字段');
return;
}
if (!/^\S+@\S+\.\S+$/.test(email)) {
alert('请输入有效邮箱');
return;
}
alert(`🎉 订单确认成功!感谢购买,${name}!`);
cart = [];
updateCartUI();
e.target.reset();
});
// Toast 提示
function showToast(msg) {
const toast = document.createElement('div');
toast.className = 'toast';
toast.textContent = msg;
document.body.appendChild(toast);
setTimeout(() => toast.remove(), 2000);
}
// 初始化
renderProducts();
updateCartUI();
</script>
</body>
</html>
用法
此提示词专为 coding 设计。复制上方内容并粘贴到你常用的 AI 工具中。
为获得最佳效果,可将占位符(方括号或大写字母标示)替换为你的具体需求。
讨论
0 条评论