仿照bilibili制作的web前端期末大作业: 仿照bilibili制作的web前端期末大作业,这是一个视频分享网站，包含用户注册、登录、主页推荐视频和热门视频展示、以及视频播放功能。该项目使用HTML、CSS和JavaScript实现，其中CSS设计了渐变背景和交互效果，JavaScript处理用户认证和轮播图等动态功能。用户数据存储在`localStorage`中，项目展示了基础的前端开发和用户交互设计。

### 项目简介

**CijiCiji** 是一个视频分享网站，主要功能包括用户注册、登录、主页展示推荐视频和热门视频、广告轮播图以及视频播放。以下是项目的详细介绍及所涉及的技术。

### 项目功能

1. **用户注册和登录**：
   - 用户可以通过注册页面创建新账户。
   - 登录页面允许已注册用户访问主页。
   - 用户凭证存储在 `localStorage` 中。

2. **主页展示**：
   - 首页展示推荐视频和热门视频。
   - 轮播图展示广告图片，并带有放大效果。
   - 视频列表中的每个视频都有放大效果，用户可以点击视频缩略图进入视频播放页面。

3. **视频播放页面**：
   - 独立的视频播放页面，包含视频播放器及返回主页的按钮。
   - 视频播放器全屏显示，用户可以方便地观看视频内容。

4. **广告页面**：
   - 每个广告图片都可以点击跳转到广告页面。
   - 广告页面有独立的样式和脚本文件，提供广告内容展示和返回主页的功能。

### 技术细节

1. **HTML**：
   - 构建项目的基础结构，包括各个页面的布局和内容。

2. **CSS**：
   - 定义页面的样式，确保各个页面具有一致的视觉效果。
   - 使用 CSS 进行页面布局、背景渐变、过渡效果和媒体查询。
   - 页面背景采用浅蓝色到浅粉色的渐变效果，增加视觉吸引力。

3. **JavaScript**：
   - 实现页面的动态交互，包括用户登录验证、注册验证、轮播图效果及其放大效果。
   - 通过 `localStorage` 存储用户数据，管理用户会话状态。

4. **本地存储（Local Storage）**：
   - 用于保存用户数据（用户名和密码），实现基本的用户认证功能。
   - 保持用户登录状态，提供简单的持久化存储方案。

### 项目文件结构

```plaintext
/
├── css/
│   ├── styles.css        # 主样式文件
│   ├── video.css         # 视频页面样式
│   └── ad.css            # 广告页面样式
├── images/               # 图片资源（轮播图、视频缩略图等）
│   ├── 1.jpg
│   ├── 2.jpg
│   └── ...
├── js/
│   ├── scripts.js        # 主脚本文件
│   ├── video.js          # 视频页面脚本
│   └── ad.js             # 广告页面脚本
├── index.html            # 主页
├── login.html            # 登录页面
├── register.html         # 注册页面
├── video.html            # 视频播放页面
└── ad.html               # 广告页面
```

### 页面功能和交互

1. **主页（index.html）**：
   - 包含导航栏、轮播图、推荐视频模块和热门视频模块。
   - 轮播图通过 JavaScript 实现自动播放和手动切换功能。
   - 推荐视频和热门视频模块展示多个视频缩略图，用户可以点击任意视频进入视频播放页面。

2. **登录页面（login.html）**：
   - 提供用户登录表单，用户输入用户名和密码进行身份验证。
   - 验证成功后，跳转到主页；验证失败则提示错误信息。

3. **注册页面（register.html）**：
   - 提供用户注册表单，用户输入新用户名和密码进行注册。
   - 注册成功后，提示用户并跳转到登录页面。

4. **视频播放页面（video.html）**：
   - 全屏展示视频播放器，用户可以观看视频内容。
   - 提供返回主页的按钮，用户可以点击返回主页。

5. **广告页面（ad.html）**：
   - 展示广告内容，用户可以点击返回主页按钮。

### 总结

该项目是一个简单的视频分享网站，展示了前端开发的基本技术和交互效果。通过使用 HTML、CSS 和 JavaScript，项目实现了用户注册登录、轮播图展示、视频推荐和播放等功能，并通过本地存储管理用户数据。该项目适合初学者学习前端开发的基础知识和实践技能。

chuxuebushi/仿照bilibili制作的web前端期末大作业

简介

发行版

贡献者

近期动态

chuxuebushi/仿照bilibili制作的web前端期末大作业 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

chuxuebushi/仿照bilibili制作的web前端期末大作业