【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';
    }
  });
});