【Html.js——效果实现】网页 PPT（蓝桥杯真题-2418）【合集】

Rossy Yan

发布于 2025-02-06 08:53:38

5600

代码可运行

文章被收录于专栏：【Educoder实训】头歌实践教学平台【Educoder实训】头歌实践教学平台

运行总次数：0

代码可运行

背景介绍

除了使用办公软件来制作 PPT，利用前端技术其实我们也可以制作一个在浏览器播放的 PPT，这样的 PPT 更加方便传播和查看，而且可以最大限度地利用前端技术的布局和交互能力。本题请实现一个讲授 HTML 基础知识的网页 PPT。

准备步骤

本题已经内置了初始代码，打开实验环境，目录结构如下：

├── css
│   └── style.css
├── effect.gif
├── images
│   ├── left-small.svg
│   └── right-small.svg
├── index.html
└── js
    ├── index.js
    └── jquery-3.6.0.min.js

其中：

css/style.css 是样式文件。
index.html 是主页面。
images 文件夹内包含了页面使用的 icon。
js/index.js 是页面 js 文件。
js/jquery-3.6.0.min.js 是 jquery 文件。
effect.gif 是页面最终的效果图。

注意：打开环境后发现缺少项目代码，请复制下述命令至命令行进行下载。

cd /home/project
wget https://labfile.oss.aliyuncs.com/courses/18164/PPT.zip
unzip PPT.zip && rm PPT.zip

在浏览器中预览 index.html 页面效果如下：

目标效果

请在 js/index.js 文件中补全代码，具体需求如下：

补充 switchPage 函数，实现根据 activeIndex 切换 PPT 页面的功能（切换页面请通过控制 section 元素的 display 属性实现），切换页面的同时需要改变左下角的页码 (class="page")，格式为 "当前页码 / 总页码"，注意。
在播放到第一页时给“上一张”按钮 (class="btn left") 添加 disable 类，并在播放到最后一页时给“下一张”按钮 (class="btn right") 添加 disable 类，其他情况下则都不添加。页面最终效果如下：

要求规定

请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成无法判题通过。

判分标准

本题完全实现题目目标得满分，否则得 0 分。

通关代码✔️

//index.js
const sectionsCount = $("section").length;
let activeIndex = 0;

// 监听用户按下空格和方向键的事件
$(document).on("keydown", (e) => {
  e.preventDefault();
  if (e.key === " " || e.key === "ArrowRight") {
    goRight();
  }
  if (e.key === "ArrowLeft") {
    goLeft();
  }
});

// 监听按钮点击事件
$(".btn.left").click(goLeft);
$(".btn.right").click(goRight);

// 切换下一张的函数
function goLeft() {
  if (activeIndex === 0) {
    return;
  }
  activeIndex -= 1;
  switchPage();
}

// 切换上一张的函数
function goRight() {
  if (activeIndex === sectionsCount - 1) {
    return;
  }
  activeIndex += 1;
  switchPage();
}

function switchPage() {
  // TODO: 请补充该函数，实现根据activeIndex切换页面的功能，并且在到达最后一页或第一页时给相应的按钮添加disable类
  $("section").css("display","none");
  $("section").eq(activeIndex).css("display","block");
  $(".page").text(`${activeIndex + 1}/${sectionsCount}`);

  if(activeIndex === 0){
    $(".btn.left").addClass("disable");
  }else{
    $(".btn.left").removeClass("disable");
  }

  if(activeIndex === sectionsCount - 1){
    $(".btn.right").addClass("disable");
  }else{
    $(".btn.right").removeClass("disable");
  }
}

代码解析📑

一、HTML 部分

//index.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>网页PPT</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
  <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<body>
  <div class="container">
    <section>
      <h1>HTML快速入门</h1>
      <p>作者：XXX</p>
    </section>
    <section>
      <h1>本章目标</h1>
      <ol style="font-size: 120%; margin: 1rem 0;">
        <li>掌握行内标签的使用</li>
        <li>掌握块级标签的使用</li>
      </ol>
    </section>
    <section>
      <h1>HTML 行内标签</h1>
      <p><code>a</code>标签: a 标签定义超链接，常用于网页之间的跳转、设置文档书签，以及链接电话、邮箱等。</p>
      <p>语法示例: <code>&lta href="链接地址"&gt&lt/a&gt</code></p>
      <br>
      <p><code>span</code>标签: span标签用于组合文档中的行内元素，它就像一个透明的盒子，可以把多个盒子放在架子的同一行。</p>
      <p>语法示例: <code>&ltspan&gt&lt/span&gt</code></p>
      <br>
      <p><code>strong</code>标签: strong标签用于给文字加粗</p>
      <p>语法示例: <code>&ltstrong&gt&lt/strong&gt</code></p>
      <br>
      <p><code>img</code>标签: img标签用于展示图片</p>
      <p>语法示例: <code>&ltimg src="图像地址" alt="图像描述" /&gt</code></p>
    </section>
    <section>
      <h1>HTML 块级标签</h1>
      <p><code>div</code>标签: div标签是最重要的一个块级元素，它可以是组合其他 HTML 元素的容器，相当于是个透明的盒子，可以把其他标签放在里面。</p>
      <p>语法示例: <code>&ltdiv&gt&lt/div&gt</code></p>
      <br>
      <p><code>p</code>标签: p标签是用来划分 HTML 文档段落的。</p>
      <p>语法示例: <code>&ltp&gt&lt/p&gt</code></p>
      <br>
      <p>标题标签: 在 HTML 中一共有六级标题，用 &lth1&gt ~ &lth6&gt 来表示，其中 &lth1&gt 的标题字号最大，依次递减。</p>
      <p>语法示例: <code>&lth1&gt&lt/h1&gt</code></p>
    </section>
    <section>
      <h1>感谢观看！</h1>
    </section>
  </div>
  <div class="controls">
    <div class="btns">
      <button class="btn left disable">
        <img src="images/left-small.svg" alt="left">
      </button>
      <button class="btn right">
        <img src="images/right-small.svg" alt="right">
      </button>
    </div>
    <div class="page">1 / 5</div>
  </div>
  <script>
    // 默认隐藏除了第一页的所有PPT
    Array.from(document.querySelectorAll('section')).slice(1).forEach(e => e.style.display = 'none');
  </script>
  <script src="js/index.js"></script>
</body>

</html>

代码功能概述

这段 HTML 代码构建了网页 PPT 的基本结构，包含多个 section 元素作为 PPT 的页面，每个页面展示不同的内容。同时，提供了用于切换页面的按钮和显示当前页码的区域。

详细解释

头部信息：
- <!DOCTYPE html>：声明文档类型为 HTML5。
- <meta charset="UTF-8" />：设置字符编码为 UTF - 8。
- <title>网页PPT</title>：设置网页标题。
- <meta name="viewport" ...>：设置视口属性，确保网页在不同设备上正确显示。
- <script src="js/jquery-3.6.0.min.js" ...>：引入 jQuery 库，用于后续的 JavaScript 交互。
- <link rel="stylesheet" type="text/css" href="css/style.css" />：引入外部 CSS 文件，用于样式设置。
主体内容：
- <div class="container">：作为 PPT 页面的容器。
- 多个 <section> 元素：每个 section 代表 PPT 的一页，包含不同的标题和内容，如 HTML 行内标签、块级标签的介绍等。
- <div class="controls">：包含切换页面的按钮和显示页码的区域。
  - <button class="btn left disable"> 和 <button class="btn right">：分别是 “上一张” 和 “下一张” 按钮，初始时 “上一张” 按钮为禁用状态。
  - <div class="page">1 / 5</div>：显示当前页码和总页码。
脚本部分：
- 内联脚本：默认隐藏除第一页外的所有 section 元素。
- <script src="js/index.js"></script>：引入外部 JavaScript 文件，实现页面切换的逻辑。

二、CSS 部分

/*style.css*/
body {
  background-color: black;
  padding: 0;
  margin: 0;
}

h1 {
  color: rgb(76, 112, 127);
  font-size: 2rem;
}

.controls {
  display: flex;
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  align-items: center;
  justify-content: space-between;
  width: 7rem;

  background-color: white;
  padding: .25rem 1rem;
  box-shadow: rgb(155 155 155) 0px 5px 10px;
  border-radius: .5rem;
}

.btns {
  display: flex;
  width: 4.5rem;
  justify-content: space-evenly;
}

.btn {
  width: 1.5rem;
  height: 2rem;
  cursor: pointer;
  display: block;
  background-color: white;
  border: none;
  padding: 0;
}

.btn img {
  width: 100%;
  height: 100%;
}

.btn.disable {
  pointer-events: none;
  opacity: 0.2;
}

.page {
  color: #333;
  font-family: 'Times New Roman', Times, serif
}

section {
  box-sizing: border-box;
  background-color: white;
  font-size: 1.25rem;
  padding: 2rem 3rem;

  width: 100vw;
  height: 100vh;
  position: absolute;
}

section:first-child,
section:last-child {
  font-size: 1.5rem;
  background-color: rgb(76, 112, 127);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

section:first-child h1,
section:last-child h1 {
  color: white;
  font-size: 3rem;
}

代码功能概述

这段 CSS 代码为 HTML 元素添加样式，实现了网页 PPT 的布局和视觉效果，包括背景颜色、按钮样式、页码显示样式以及 PPT 页面的样式等。

详细解释

全局样式：
- body：设置页面背景颜色为黑色，去除内外边距。
- h1：设置标题的颜色和字体大小。
控制区域样式：
- .controls：使用 Flexbox 布局，将控制区域固定在页面左下角，设置背景颜色、内边距、阴影和圆角。
- .btns：使用 Flexbox 布局，设置按钮区域的宽度和子元素的间距。
- .btn：设置按钮的宽度、高度、光标样式、背景颜色和边框。
- .btn img：设置按钮内图片的宽度和高度。
- .btn.disable：设置禁用按钮的样式，使其不可点击并降低透明度。
页码样式：
- .page：设置页码的颜色和字体。
PPT 页面样式：
- section：设置 PPT 页面的背景颜色、字体大小、内边距、宽度、高度和定位方式。
- section:first-child 和 section:last-child：设置第一页和最后一页的背景颜色、字体大小和布局方式。
- section:first-child h1 和 section:last-child h1：设置第一页和最后一页标题的颜色和字体大小。

三、JavaScript 部分

//index.js
const sectionsCount = $("section").length;
let activeIndex = 0;

// 监听用户按下空格和方向键的事件
$(document).on("keydown", (e) => {
  e.preventDefault();
  if (e.key === " " || e.key === "ArrowRight") {
    goRight();
  }
  if (e.key === "ArrowLeft") {
    goLeft();
  }
});

// 监听按钮点击事件
$(".btn.left").click(goLeft);
$(".btn.right").click(goRight);

// 切换下一张的函数
function goLeft() {
  if (activeIndex === 0) {
    return;
  }
  activeIndex -= 1;
  switchPage();
}

// 切换上一张的函数
function goRight() {
  if (activeIndex === sectionsCount - 1) {
    return;
  }
  activeIndex += 1;
  switchPage();
}

function switchPage() {
  // TODO: 请补充该函数，实现根据activeIndex切换页面的功能，并且在到达最后一页或第一页时给相应的按钮添加disable类
  $("section").css("display","none");
  $("section").eq(activeIndex).css("display","block");
  $(".page").text(`${activeIndex + 1}/${sectionsCount}`);

  if(activeIndex === 0){
    $(".btn.left").addClass("disable");
  }else{
    $(".btn.left").removeClass("disable");
  }

  if(activeIndex === sectionsCount - 1){
    $(".btn.right").addClass("disable");
  }else{
    $(".btn.right").removeClass("disable");
  }
}

代码功能概述

这段 JavaScript 代码实现了网页 PPT 的页面切换功能，支持通过键盘方向键和按钮点击来切换页面，同时根据当前页码更新按钮状态和显示的页码。

详细解释

变量初始化：
- sectionsCount：获取 section 元素的数量，即 PPT 的总页数。
- activeIndex：表示当前显示的页面索引，初始值为 0。
事件监听：
- 键盘事件监听：监听用户按下键盘的事件，当按下空格键或右方向键时调用 goRight() 函数，按下左方向键时调用 goLeft() 函数。
- 按钮点击事件监听：监听 “上一张” 和 “下一张” 按钮的点击事件，分别调用 goLeft() 和 goRight() 函数。
页面切换函数：
- goLeft()：如果当前页面是第一页，则不做任何操作；否则，将 activeIndex 减 1 并调用 switchPage() 函数。
- goRight()：如果当前页面是最后一页，则不做任何操作；否则，将 activeIndex 加 1 并调用 switchPage() 函数。
- switchPage()：
  - 隐藏所有 section 元素，然后显示当前 activeIndex 对应的 section 元素。
  - 更新页码显示，格式为 “当前页码 / 总页码”。
  - 如果当前页面是第一页，给 “上一张” 按钮添加 disable 类；否则，移除该类。
  - 如果当前页面是最后一页，给 “下一张” 按钮添加 disable 类；否则，移除该类。

四、工作流程 ▶️

页面加载：浏览器加载 HTML、CSS 和 JavaScript 文件，渲染页面布局，默认隐藏除第一页外的所有 PPT 页面，同时 “上一张” 按钮处于禁用状态。
事件触发：用户按下键盘的方向键或点击 “上一张”“下一张” 按钮，触发相应的事件处理函数。
页面切换：事件处理函数根据当前页码和操作类型更新 activeIndex，并调用 switchPage() 函数。
页面更新：switchPage() 函数隐藏所有页面，显示当前 activeIndex 对应的页面，更新页码显示，并根据当前页码更新按钮状态。
重复操作：用户可以继续通过键盘或按钮切换页面，直到浏览完所有 PPT 页面。