当前位置：首页 > news >正文

Web VIVO手机商城网站项目4页面

news 2025/11/11 9:23:59

源码获取魏：RACXDX 支持要求定制文档编写

1. 主题总结

2. 页面结构与技术分析

2.1 首页（index.html）

内容涵盖

2.2 产品详情页（product.html）

技术特点：

内容涵盖

2.3 登录页面（login.html）

技术特点：

内容涵盖：

2.4 注册页面（register.html）

技术特点：

内容涵盖

3. 技术亮点

3.1 前端交互体验

3.2 响应式设计

3.3 代码组织与可维护性

1. 主题总结

VIVO手机商城网站是一个现代化的电子商务平台，专注于展示和销售VIVO品牌的各类产品，包括智能手机、智能硬件和配件等。网站采用了简洁大方的设计风格，以黑色和橙色为主要色调，营造出专业且时尚的品牌形象。整体界面布局清晰，用户体验流畅，功能完善，涵盖了产品浏览、详情查看、用户登录注册等核心电商功能，同时支持响应式设计，确保在不同设备上都能提供优质的浏览体验。网站包含4个核心页面，涵盖了产品展示、详情查看、用户登录注册等主要功能，为用户提供了便捷的购物体验。整体设计简洁大方，符合品牌形象，同时注重交互细节，能够有效提升用户转化率。

2. 页面结构与技术分析

2.1 首页（index.html）

**技术特点：**

- 采用HTML5语义化标签构建页面结构

- 使用CSS3变量管理主题色彩系统

- 响应式导航栏设计，支持二级菜单

- Flexbox和Grid布局实现复杂页面结构

- JavaScript实现轮播图自动播放和交互控制

内容涵盖

- 顶部导航栏：包含品牌Logo、主导航菜单和用户操作按钮（登录/注册）

- 左侧分类导航：提供产品分类快速入口

- 轮播图展示区：自动轮播最新促销活动和热门产品

- 热门推荐区：网格布局展示精选手机产品

- 专区内容区：手机专区、配件专区和免费定制等特色服务入口

- 页脚信息：公司简介、客户服务和社交媒体链接

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>VIVO手机商城 - 首页</title><link rel="stylesheet" href="styles/reset.css"><link rel="stylesheet" href="styles/main.css">
</head>
<body><!-- 顶部导航栏 --><header class="header"><div class="header-container"><div class="logo"><a href="index.html"><img src="images/0.png" alt="VIVO Logo"></a></div><nav class="main-nav"><ul class="nav-list"><li class="nav-item"><a href="#" class="nav-link">X系列</a></li><li class="nav-item"><a href="#" class="nav-link">S系列</a></li><li class="nav-item"><a href="#" class="nav-link">Y系列</a></li><li class="nav-item"><a href="#" class="nav-link">iQOO手机</a></li><li class="nav-item"><a href="#" class="nav-link">智能硬件</a></li><li class="nav-item"><a href="#" class="nav-link">商城</a></li><li class="nav-item"><a href="#" class="nav-link">服务</a></li></ul></nav><div class="user-actions"><a href="login.html" class="login-btn">登录</a><a href="register.html" class="register-btn">注册</a><span class="search-icon">🔍</span></div></div></header><main class="main-content-wrapper"><div class="main-container"><!-- 左侧边栏导航 --><aside class="sidebar-nav"><ul class="sidebar-list"><li class="sidebar-item"><a href="#" class="sidebar-link">手机</a><span class="arrow">></span></li><li class="sidebar-item"><a href="#" class="sidebar-link">平板手表</a><span class="arrow">></span></li><li class="sidebar-item"><a href="#" class="sidebar-link">手机充电</a><span class="arrow">></span></li><li class="sidebar-item"><a href="#" class="sidebar-link">手机壳膜</a><span class="arrow">></span></li><li class="sidebar-item"><a href="#" class="sidebar-link">耳机音箱</a><span class="arrow">></span></li><li class="sidebar-item"><a href="#" class="sidebar-link">游戏摄影</a><span class="arrow">></span></li><li class="sidebar-item"><a href="#" class="sidebar-link">数码家电</a><span class="arrow">></span></li><li class="sidebar-item"><a href="#" class="sidebar-link">生活日用</a><span class="arrow">></span></li></ul></aside><!-- 主内容区域 --><div class="main-content"><!-- 轮播图部分 --><section class="banner"><div class="banner-container"><div class="carousel"><div class="carousel-inner"><div class="carousel-item active"><img src="images/1.png" alt="促销banner 1" class="banner-img"></div><div class="carousel-item"><img src="images/2.png" alt="促销banner 2" class="banner-img"></div><div class="carousel-item"><img src="images/3.png" alt="促销banner 3" class="banner-img"></div><div class="carousel-item"><img src="images/4.png" alt="促销banner 4" class="banner-img"></div></div><!-- 轮播图控制按钮 --><button class="carousel-control prev" aria-label="上一张">❮</button><button class="carousel-control next" aria-label="下一张">❯</button><!-- 轮播图指示器 --><div class="carousel-indicators"><button class="indicator active" data-slide="0" aria-label="第1张"></button><button class="indicator" data-slide="1" aria-label="第2张"></button><button class="indicator" data-slide="2" aria-label="第3张"></button><button class="indicator" data-slide="3" aria-label="第4张"></button></div></div></div></section><!-- 热门商品展示 --><section class="featured-products"><h2 class="section-title">热门推荐</h2><div class="product-grid"><div class="product-card"><img src="images/6.png" alt="手机1" class="product-img"><h3 class="product-title">VIVO X90 Pro+</h3><p class="product-price">¥5999</p><a href="product.html" class="product-link">查看详情</a></div><div class="product-card"><img src="images/7.png" alt="手机2" class="product-img"><h3 class="product-title">VIVO S16</h3><p class="product-price">¥2999</p><a href="product.html" class="product-link">查看详情</a></div><div class="product-card"><img src="images/8.png" alt="手机3" class="product-img"><h3 class="product-title">iQOO 11</h3><p class="product-price">¥3999</p><a href="product.html" class="product-link">查看详情</a></div><div class="product-card"><img src="images/9.png" alt="手机4" class="product-img"><h3 class="product-title">VIVO Y77</h3><p class="product-price">¥1999</p><a href="product.html" class="product-link">查看详情</a></div></div></section><!-- 新增专区内容 --><section class="specialized-sections"><div class="section-grid"><div class="section-card"><img src="images/10.png" alt="手机专区" class="section-img"><div class="section-content"><h3 class="section-title-small">手机专区</h3><p class="section-description">官方正品，全国联保</p><a href="#" class="section-link">查看更多 ></a></div></div><div class="section-card"><img src="images/11.png" alt="配件专区" class="section-img"><div class="section-content"><h3 class="section-title-small">配件专区</h3><p class="section-description">精挑细选，乐享品质</p><a href="#" class="section-link">查看更多 ></a></div></div><div class="section-card"><img src="images/12.png" alt="免费定制" class="section-img"><div class="section-content"><h3 class="section-title-small">免费定制</h3><p class="section-description">个性独立，镌刻服务</p><a href="#" class="section-link">查看更多 ></a></div></div></div></section></div></div></main><!-- 页脚 --><footer class="footer"><div class="footer-container"><div class="footer-section"><h4>关于我们</h4><ul><li><a href="#">公司简介</a></li><li><a href="#">加入我们</a></li><li><a href="#">联系我们</a></li></ul></div><div class="footer-section"><h4>客户服务</h4><ul><li><a href="#">帮助中心</a></li><li><a href="#">售后服务</a></li><li><a href="#">常见问题</a></li></ul></div><div class="footer-section"><h4>关注我们</h4><ul><li><a href="#">官方微博</a></li><li><a href="#">官方微信</a></li><li><a href="#">官方抖音</a></li></ul></div></div><div class="footer-bottom"><p>&copy; 2024 VIVO手机商城 版权所有</p></div></footer><script src="js/main.js"></script><script src="js/menu.js"></script><script src="js/carousel.js"></script>
</body>
</html>

2.2 产品详情页（product.html）

技术特点：

- 模块化CSS设计，独立的产品详情样式

- Grid布局实现图片区域和信息区域的双列布局

- 图片切换交互效果

- 产品选项和数量选择的动态交互

- 响应式设计适配不同屏幕尺寸

内容涵盖

- 产品图片展示区：主图展示和缩略图切换功能

- 产品信息区：标题、价格、描述和详细规格

- 产品选项选择：颜色、存储容量等配置选择

- 数量选择器：通过加减按钮调整购买数量

- 操作按钮：立即购买和加入购物车

- 产品特性列表：以卡片形式展示产品核心卖点

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>VIVO X90 Pro+ - 商品详情</title><link rel="stylesheet" href="styles/reset.css"><link rel="stylesheet" href="styles/main.css"><style>.product-detail {margin-top: 80px;padding: 40px 0;background-color: var(--background-color);}.product-container {max-width: 1200px;margin: 0 auto;padding: 0 15px;display: grid;grid-template-columns: 1fr 1fr;gap: 40px;}.product-gallery {background: var(--white);border-radius: 8px;padding: 20px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);}.main-image {width: 100%;height: 400px;object-fit: contain;margin-bottom: 20px;}.thumbnail-list {display: flex;gap: 10px;overflow-x: auto;padding-bottom: 10px;}.thumbnail {width: 80px;height: 80px;object-fit: cover;border-radius: 4px;cursor: pointer;border: 2px solid transparent;transition: border-color 0.3s;}.thumbnail:hover, .thumbnail.active {border-color: var(--accent-color);}.product-info {background: var(--white);border-radius: 8px;padding: 30px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);}.product-title {font-size: 24px;color: var(--primary-color);margin-bottom: 15px;}.product-price {font-size: 28px;color: var(--accent-color);margin-bottom: 20px;}.product-description {color: var(--secondary-color);margin-bottom: 30px;line-height: 1.6;}.product-options {margin-bottom: 30px;}.option-group {margin-bottom: 20px;}.option-title {font-size: 16px;color: var(--primary-color);margin-bottom: 10px;}.option-list {display: flex;gap: 10px;flex-wrap: wrap;}.option-item {padding: 8px 15px;border: 1px solid var(--border-color);border-radius: 4px;cursor: pointer;transition: all 0.3s;}.option-item:hover, .option-item.active {border-color: var(--accent-color);color: var(--accent-color);}.quantity-selector {display: flex;align-items: center;gap: 10px;margin-bottom: 30px;}.quantity-btn {width: 30px;height: 30px;border: 1px solid var(--border-color);border-radius: 4px;display: flex;align-items: center;justify-content: center;cursor: pointer;transition: all 0.3s;}.quantity-btn:hover {border-color: var(--accent-color);color: var(--accent-color);}.quantity-input {width: 50px;height: 30px;text-align: center;border: 1px solid var(--border-color);border-radius: 4px;}.action-buttons {display: flex;gap: 15px;}.buy-now-btn, .add-to-cart-btn {flex: 1;padding: 12px;border-radius: 4px;font-size: 16px;font-weight: 500;text-align: center;cursor: pointer;transition: opacity 0.3s;}.buy-now-btn {background-color: var(--accent-color);color: var(--white);}.add-to-cart-btn {border: 1px solid var(--accent-color);color: var(--accent-color);}.buy-now-btn:hover, .add-to-cart-btn:hover {opacity: 0.9;}.product-features {margin-top: 40px;background: var(--white);border-radius: 8px;padding: 30px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);}.features-title {font-size: 20px;color: var(--primary-color);margin-bottom: 20px;padding-bottom: 10px;border-bottom: 1px solid var(--border-color);}.features-list {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 20px;}.feature-item {display: flex;align-items: center;gap: 10px;}.feature-icon {width: 24px;height: 24px;color: var(--accent-color);}@media (max-width: 768px) {.product-container {grid-template-columns: 1fr;}.main-image {height: 300px;}}</style>
</head>
<body><!-- 复用首页的header --><header class="header"><div class="header-container"><div class="logo"><a href="index.html"><img src="images/0.png" alt="VIVO Logo"></a></div><nav class="main-nav"><ul class="nav-list"><li class="nav-item"><a href="#" class="nav-link">手机</a><div class="submenu"><ul><li><a href="#">X系列</a></li><li><a href="#">S系列</a></li><li><a href="#">Y系列</a></li><li><a href="#">iQOO系列</a></li></ul></div></li><li class="nav-item"><a href="#" class="nav-link">配件</a><div class="submenu"><ul><li><a href="#">手机壳</a></li><li><a href="#">充电器</a></li><li><a href="#">耳机</a></li></ul></div></li><li class="nav-item"><a href="#" class="nav-link">服务</a></li><li class="nav-item"><a href="#" class="nav-link">社区</a></li></ul></nav><div class="user-actions"><a href="login.html" class="login-btn">登录</a><a href="register.html" class="register-btn">注册</a></div></div></header><main class="product-detail"><div class="product-container"><div class="product-gallery"><img src="images/5.png" alt="VIVO X90 Pro+" class="main-image" id="mainImage"><div class="thumbnail-list"><img src="images/5.png" alt="缩略图1" class="thumbnail active" onclick="changeImage(this.src)"><img src="images/6.png" alt="缩略图2" class="thumbnail" onclick="changeImage(this.src)"></div></div><div class="product-info"><h1 class="product-title">VIVO X90 Pro+</h1><div class="product-price">¥5999</div><p class="product-description">VIVO X90 Pro+ 搭载骁龙8 Gen 2处理器，配备蔡司专业影像系统，支持120W超快闪充，带来极致影像体验。</p><div class="product-options"><div class="option-group"><div class="option-title">颜色</div><div class="option-list"><div class="option-item active">曜金黑</div><div class="option-item">星云蓝</div><div class="option-item">赤霞橙</div></div></div><div class="option-group"><div class="option-title">存储容量</div><div class="option-list"><div class="option-item active">8GB+256GB</div><div class="option-item">12GB+256GB</div><div class="option-item">12GB+512GB</div></div></div></div><div class="quantity-selector"><div class="quantity-btn" onclick="updateQuantity(-1)">-</div><input type="number" class="quantity-input" value="1" min="1" max="99" id="quantity"><div class="quantity-btn" onclick="updateQuantity(1)">+</div></div><div class="action-buttons"><button class="buy-now-btn" onclick="buyNow()">立即购买</button><button class="add-to-cart-btn" onclick="addToCart()">加入购物车</button></div></div></div><div class="product-features"><h2 class="features-title">产品特点</h2><div class="features-list"><div class="feature-item"><span class="feature-icon">📱</span><span>6.78英寸 2K AMOLED屏幕</span></div><div class="feature-item"><span class="feature-icon">📸</span><span>5000万像素蔡司四摄</span></div><div class="feature-item"><span class="feature-icon">⚡</span><span>120W超快闪充</span></div><div class="feature-item"><span class="feature-icon">🔋</span><span>4700mAh大电池</span></div><div class="feature-item"><span class="feature-icon">💪</span><span>骁龙8 Gen 2处理器</span></div><div class="feature-item"><span class="feature-icon">📶</span><span>5G双卡双待</span></div></div></div></main><!-- 复用首页的footer --><footer class="footer"><div class="footer-container"><div class="footer-section"><h4>关于我们</h4><ul><li><a href="#">公司简介</a></li><li><a href="#">加入我们</a></li><li><a href="#">联系我们</a></li></ul></div><div class="footer-section"><h4>客户服务</h4><ul><li><a href="#">帮助中心</a></li><li><a href="#">售后服务</a></li><li><a href="#">常见问题</a></li></ul></div><div class="footer-section"><h4>关注我们</h4><ul><li><a href="#">官方微博</a></li><li><a href="#">官方微信</a></li><li><a href="#">官方抖音</a></li></ul></div></div><div class="footer-bottom"><p>&copy; 2024 VIVO手机商城 版权所有</p></div></footer><script>// 切换商品图片function changeImage(src) {document.getElementById('mainImage').src = src;// 更新缩略图选中状态document.querySelectorAll('.thumbnail').forEach(thumb => {thumb.classList.remove('active');if (thumb.src === src) {thumb.classList.add('active');}});}// 更新商品数量function updateQuantity(change) {const input = document.getElementById('quantity');let value = parseInt(input.value) + change;value = Math.max(1, Math.min(99, value));input.value = value;}// 选项切换document.querySelectorAll('.option-item').forEach(item => {item.addEventListener('click', function() {// 移除同组其他选项的active类this.parentElement.querySelectorAll('.option-item').forEach(option => {option.classList.remove('active');});// 添加当前选项的active类this.classList.add('active');});});// 立即购买function buyNow() {const quantity = document.getElementById('quantity').value;const color = document.querySelector('.option-group:nth-child(1) .option-item.active').textContent;const storage = document.querySelector('.option-group:nth-child(2) .option-item.active').textContent;alert(`即将购买：VIVO X90 Pro+\n颜色：${color}\n存储：${storage}\n数量：${quantity}`);}// 加入购物车function addToCart() {const quantity = document.getElementById('quantity').value;const color = document.querySelector('.option-group:nth-child(1) .option-item.active').textContent;const storage = document.querySelector('.option-group:nth-child(2) .option-item.active').textContent;alert(`已加入购物车：VIVO X90 Pro+\n颜色：${color}\n存储：${storage}\n数量：${quantity}`);}</script>
</body>
</html>

2.3 登录页面（login.html）

技术特点：

- 居中布局设计，突出表单区域

- 表单验证的JavaScript实现

- 错误提示和反馈机制

- 简洁的交互效果和过渡动画

内容涵盖：

- 登录表单：用户名/手机号和密码输入

- 表单验证：非空验证和即时错误提示

- 登录按钮和提交功能

- 注册入口和忘记密码链接

- 响应式设计，确保在移动设备上良好显示

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>VIVO手机商城 - 登录</title><link rel="stylesheet" href="styles/reset.css"><link rel="stylesheet" href="styles/main.css"><style>.login-page {min-height: 100vh;display: flex;align-items: center;justify-content: center;background-color: var(--background-color);padding: 20px;}.login-container {background: var(--white);padding: 40px;border-radius: 8px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);width: 100%;max-width: 400px;}.login-header {text-align: center;margin-bottom: 30px;}.login-header h1 {font-size: 24px;color: var(--primary-color);margin-bottom: 10px;}.login-form {display: flex;flex-direction: column;gap: 20px;}.form-group {display: flex;flex-direction: column;gap: 8px;}.form-group label {font-size: 14px;color: var(--secondary-color);}.form-group input {padding: 12px;border: 1px solid var(--border-color);border-radius: 4px;font-size: 16px;}.form-group input:focus {border-color: var(--accent-color);}.login-btn {background-color: var(--accent-color);color: var(--white);padding: 12px;border-radius: 4px;font-size: 16px;font-weight: 500;cursor: pointer;transition: opacity 0.3s;}.login-btn:hover {opacity: 0.9;}.login-footer {text-align: center;margin-top: 20px;font-size: 14px;color: var(--secondary-color);}.login-footer a {color: var(--accent-color);text-decoration: underline;}.error-message {color: #ff4d4f;font-size: 14px;display: none;}</style>
</head>
<body><div class="login-page"><div class="login-container"><div class="login-header"><h1>欢迎登录</h1><p>登录您的VIVO账号</p></div><form class="login-form" id="loginForm"><div class="form-group"><label for="username">用户名/手机号</label><input type="text" id="username" name="username" required><div class="error-message" id="usernameError"></div></div><div class="form-group"><label for="password">密码</label><input type="password" id="password" name="password" required><div class="error-message" id="passwordError"></div></div><button type="submit" class="login-btn">登录</button></form><div class="login-footer"><p>还没有账号？<a href="register.html">立即注册</a></p><p><a href="#">忘记密码？</a></p></div></div></div><script>document.getElementById('loginForm').addEventListener('submit', function(e) {e.preventDefault();const username = document.getElementById('username').value;const password = document.getElementById('password').value;const usernameError = document.getElementById('usernameError');const passwordError = document.getElementById('passwordError');// 重置错误信息usernameError.style.display = 'none';passwordError.style.display = 'none';let isValid = true;// 简单的表单验证if (!username) {usernameError.textContent = '请输入用户名/手机号';usernameError.style.display = 'block';isValid = false;}if (!password) {passwordError.textContent = '请输入密码';passwordError.style.display = 'block';isValid = false;}if (isValid) {// 这里可以添加实际的登录逻辑console.log('登录信息：', { username, password });// 模拟登录成功alert('登录成功！');window.location.href = 'index.html';}});</script>
</body>
</html>

2.4 注册页面（register.html）

技术特点：

- 增强的表单验证逻辑

- 验证码倒计时功能

- 密码强度要求提示

- 密码一致性验证

- 移动端友好的表单设计

内容涵盖

- 手机号码输入和验证

- 密码设置和确认

- 验证码获取和验证功能（含倒计时）

- 注册按钮和提交逻辑

- 登录入口链接

- 详细的密码要求提示

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>VIVO手机商城 - 注册</title><link rel="stylesheet" href="styles/reset.css"><link rel="stylesheet" href="styles/main.css"><style>.register-page {min-height: 100vh;display: flex;align-items: center;justify-content: center;background-color: var(--background-color);padding: 20px;}.register-container {background: var(--white);padding: 40px;border-radius: 8px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);width: 100%;max-width: 400px;}.register-header {text-align: center;margin-bottom: 30px;}.register-header h1 {font-size: 24px;color: var(--primary-color);margin-bottom: 10px;}.register-form {display: flex;flex-direction: column;gap: 20px;}.form-group {display: flex;flex-direction: column;gap: 8px;}.form-group label {font-size: 14px;color: var(--secondary-color);}.form-group input {padding: 12px;border: 1px solid var(--border-color);border-radius: 4px;font-size: 16px;}.form-group input:focus {border-color: var(--accent-color);}.register-btn {background-color: var(--accent-color);color: var(--white);padding: 12px;border-radius: 4px;font-size: 16px;font-weight: 500;cursor: pointer;transition: opacity 0.3s;}.register-btn:hover {opacity: 0.9;}.register-footer {text-align: center;margin-top: 20px;font-size: 14px;color: var(--secondary-color);}.register-footer a {color: var(--accent-color);text-decoration: underline;}.error-message {color: #ff4d4f;font-size: 14px;display: none;}.password-requirements {font-size: 12px;color: var(--secondary-color);margin-top: 4px;}</style>
</head>
<body><div class="register-page"><div class="register-container"><div class="register-header"><h1>创建账号</h1><p>加入VIVO大家庭</p></div><form class="register-form" id="registerForm"><div class="form-group"><label for="phone">手机号码</label><input type="tel" id="phone" name="phone" required pattern="[0-9]{11}"><div class="error-message" id="phoneError"></div></div><div class="form-group"><label for="password">设置密码</label><input type="password" id="password" name="password" required><div class="error-message" id="passwordError"></div><div class="password-requirements">密码长度8-20位，必须包含字母和数字</div></div><div class="form-group"><label for="confirmPassword">确认密码</label><input type="password" id="confirmPassword" name="confirmPassword" required><div class="error-message" id="confirmPasswordError"></div></div><div class="form-group"><label for="verificationCode">验证码</label><div style="display: flex; gap: 10px;"><input type="text" id="verificationCode" name="verificationCode" required style="flex: 1;"><button type="button" id="getCodeBtn" style="padding: 0 15px; border: 1px solid var(--accent-color); color: var(--accent-color); border-radius: 4px; white-space: nowrap;">获取验证码</button></div><div class="error-message" id="verificationCodeError"></div></div><button type="submit" class="register-btn">注册</button></form><div class="register-footer"><p>已有账号？<a href="login.html">立即登录</a></p></div></div></div><script>// 获取验证码按钮倒计时let countdown = 60;const getCodeBtn = document.getElementById('getCodeBtn');getCodeBtn.addEventListener('click', function() {const phone = document.getElementById('phone').value;const phoneError = document.getElementById('phoneError');if (!phone || !/^1[3-9]\d{9}$/.test(phone)) {phoneError.textContent = '请输入正确的手机号码';phoneError.style.display = 'block';return;}// 开始倒计时getCodeBtn.disabled = true;let timer = setInterval(() => {getCodeBtn.textContent = `${countdown}秒后重新获取`;countdown--;if (countdown < 0) {clearInterval(timer);getCodeBtn.disabled = false;getCodeBtn.textContent = '获取验证码';countdown = 60;}}, 1000);// 这里可以添加发送验证码的实际逻辑console.log('发送验证码到：', phone);});// 表单验证document.getElementById('registerForm').addEventListener('submit', function(e) {e.preventDefault();const phone = document.getElementById('phone').value;const password = document.getElementById('password').value;const confirmPassword = document.getElementById('confirmPassword').value;const verificationCode = document.getElementById('verificationCode').value;const phoneError = document.getElementById('phoneError');const passwordError = document.getElementById('passwordError');const confirmPasswordError = document.getElementById('confirmPasswordError');const verificationCodeError = document.getElementById('verificationCodeError');// 重置错误信息phoneError.style.display = 'none';passwordError.style.display = 'none';confirmPasswordError.style.display = 'none';verificationCodeError.style.display = 'none';let isValid = true;// 手机号验证if (!phone || !/^1[3-9]\d{9}$/.test(phone)) {phoneError.textContent = '请输入正确的手机号码';phoneError.style.display = 'block';isValid = false;}// 密码验证if (!password || !/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,20}$/.test(password)) {passwordError.textContent = '密码必须包含字母和数字，长度8-20位';passwordError.style.display = 'block';isValid = false;}// 确认密码验证if (password !== confirmPassword) {confirmPasswordError.textContent = '两次输入的密码不一致';confirmPasswordError.style.display = 'block';isValid = false;}// 验证码验证if (!verificationCode || !/^\d{6}$/.test(verificationCode)) {verificationCodeError.textContent = '请输入6位数字验证码';verificationCodeError.style.display = 'block';isValid = false;}if (isValid) {// 这里可以添加实际的注册逻辑console.log('注册信息：', { phone, password, verificationCode });// 模拟注册成功alert('注册成功！');window.location.href = 'login.html';}});</script>
</body>
</html>

3. 技术亮点

3.1 前端交互体验

- **轮播图功能**：实现了自动播放、手动切换、指示器导航等完整功能，鼠标悬停时暂停播放，离开时继续，用户体验流畅。

- **导航菜单交互**：二级菜单的显示/隐藏控制，点击页面其他区域自动关闭菜单，提升用户体验。

- **表单交互**：实时表单验证，即时错误反馈，验证码倒计时等功能增强了用户体验。