【JavaScript 网页设计实例教程：电商+视频】详细教程

JavaScript 网页设计实例教程

一、电商网页设计
二、视频网页设计

一、电商网页设计

页面布局规划
- 确定电商网页的主要板块，如导航栏、商品展示区、购物车、用户登录/注册等。
- 使用 HTML 和 CSS 构建基本的页面结构。例如：

<!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">
</head><body><header><nav><ul><li>首页</li><li>商品分类</li><li>购物车</li><li>用户登录</li></ul></nav></header><main><section class="product-list"><!-- 商品展示区 --></section></main><footer><!-- 版权信息等 --></footer>
</body></html>

在 CSS 文件（styles.css）中定义样式，使页面具有良好的外观和布局。

商品展示
- 使用 JavaScript 和 HTML 结构来动态展示商品信息。可以创建一个商品数据数组，包含商品的名称、价格、图片等信息。例如：

const products = [{ name: '商品 1', price: 100, image: 'product1.jpg' },{ name: '商品 2', price: 200, image: 'product2.jpg' },// 更多商品...
];

在 HTML 中创建一个容器用于展示商品，例如：

<section class="product-list"><div class="product-item" data-product-index="0"></div><div class="product-item" data-product-index="1"></div><!-- 更多商品项 -->
</section>

使用 JavaScript 遍历商品数据数组，将商品信息填充到对应的 HTML 元素中。例如：

const productItems = document.querySelectorAll('.product-item');
productItems.forEach((item, index) => {const product = products[index];item.innerHTML = `<img src="${product.image}" alt="${product.name}"><h3>${product.name}</h3><p>价格：${product.price}</p><button>加入购物车</button>`;
});

购物车功能
- 创建一个购物车对象来存储已添加的商品。例如：

const cart = {items: [],addItem(product) {this.items.push(product);},removeItem(product) {const index = this.items.indexOf(product);if (index > -1) {this.items.splice(index, 1);}}
};

在商品展示区的“加入购物车”按钮上添加点击事件处理程序，将商品添加到购物车。例如：

const addToCartButtons = document.querySelectorAll('.product-item button');
addToCartButtons.forEach((button, index) => {button.addEventListener('click', () => {const product = products[index];cart.addItem(product);console.log('商品已加入购物车：', product.name);});
});

在页面上显示购物车中的商品数量和总价等信息。例如：

function updateCartDisplay() {const cartCount = document.getElementById('cart-count');const cartTotal = document.getElementById('cart-total');let totalPrice = 0;cart.items.forEach(product => {totalPrice += product.price;});cartCount.textContent = cart.items.length;cartTotal.textContent = totalPrice;
}
updateCartDisplay();

用户登录/注册
- 创建用户登录和注册的表单。例如：

<div class="user-login"><form><input type="text" placeholder="用户名"><input type="password" placeholder="密码"><button type="submit">登录</button></form><a href="#">注册</a>
</div>

使用 JavaScript 处理表单提交事件，验证用户输入并进行登录或注册操作。例如：

const loginForm = document.querySelector('.user-login form');
loginForm.addEventListener('submit', (e) => {e.preventDefault();const username = document.querySelector('input[type="text"]').value;const password = document.querySelector('input[type="password"]').value;// 进行登录验证逻辑
});

二、视频网页设计

页面布局
- 设计视频网页的布局，包括视频播放器、视频列表、搜索栏等。例如：

<!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">
</head><body><header><nav><ul><li>首页</li><li>视频分类</li><li>搜索</li></ul></nav></header><main><section class="video-player"><!-- 视频播放器 --></section><section class="video-list"><!-- 视频列表 --></section></main>
</body></html>

使用 CSS 定义页面的样式，使视频播放器和视频列表有合适的布局和外观。

视频播放器
- 使用 HTML5 的<video>标签创建视频播放器。例如：

<section class="video-player"><video controls><source src="video.mp4" type="video/mp4">你的浏览器不支持 HTML5 视频。</video>
</section>

使用 JavaScript 控制视频的播放、暂停、音量等功能。例如：

const videoPlayer = document.querySelector('video');
videoPlayer.addEventListener('play', () => {console.log('视频开始播放');
});
videoPlayer.addEventListener('pause', () => {console.log('视频暂停');
});
const volumeSlider = document.getElementById('volume-slider');
volumeSlider.addEventListener('input', () => {videoPlayer.volume = volumeSlider.value;
});

视频列表
- 创建一个视频数据数组，包含视频的标题、描述、链接等信息。例如：

const videos = [{ title: '视频 1', description: '这是视频 1 的描述', src: 'video1.mp4' },{ title: '视频 2', description: '这是视频 2 的描述', src: 'video2.mp4' },// 更多视频...
];

在 HTML 中创建一个容器用于展示视频列表。例如：

<section class="video-list"><div class="video-item" data-video-index="0"></div><div class="video-item" data-video-index="1"></div><!-- 更多视频项 -->
</section>

使用 JavaScript 遍历视频数据数组，将视频信息填充到对应的 HTML 元素中。例如：

const videoItems = document.querySelectorAll('.video-item');
videoItems.forEach((item, index) => {const video = videos[index];item.innerHTML = `<h3>${video.title}</h3><p>${video.description}</p><button>播放</button>`;
});

在视频列表的“播放”按钮上添加点击事件处理程序，当点击按钮时，将对应的视频加载到视频播放器中播放。例如：

const playButtons = document.querySelectorAll('.video-item button');
playButtons.forEach((button, index) => {button.addEventListener('click', () => {const video = videos[index];const videoPlayer = document.querySelector('video');videoPlayer.src = video.src;videoPlayer.play();});
});

搜索功能
- 在页面上创建一个搜索栏。例如：

<input type="text" placeholder="搜索视频">

使用 JavaScript 监听搜索栏的输入事件，当用户输入关键词时，过滤视频列表，只显示与关键词匹配的视频。例如：

const searchInput = document.querySelector('input[type="text"]');
searchInput.addEventListener('input', () => {const keyword = searchInput.value.toLowerCase();const videoItems = document.querySelectorAll('.video-item');videoItems.forEach(item => {const title = item.querySelector('h3').textContent.toLowerCase();if (title.includes(keyword)) {item.style.display = 'block';} else {item.style.display = 'none';}});
});