基于网络的HTML演示文稿生成器

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在这个项目中,你将学习如何使用前端技术创建一个基于网页的PowerPoint(PPT)演示文稿。这种类型的PPT更便于传播和查看,并且可以充分利用前端技术的布局和交互能力。

👀 预览

Web PPT预览演示

🎯 任务

在这个项目中,你将学习:

  • 如何实现 switchPage 函数以在PPT页面之间切换
  • 如何处理用户输入,如键盘按键和按钮点击,以浏览PPT页面
  • 如何实现 goLeftgoRight 函数以处理PPT页面之间的导航
  • 如何向PPT幻灯片添加内容以教授基本的HTML知识

🏆 成果

完成这个项目后,你将能够:

  • 使用前端技术创建一个基于网页的PowerPoint(PPT)演示文稿
  • 操作DOM以显示和隐藏PPT页面
  • 处理用户输入并相应地更新UI
  • 以PPT格式组织和展示与HTML相关的内容

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html(("`HTML`")) -.-> html/FormsandInputGroup(["`Forms and Input`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/LayoutandSectioningGroup -.-> html/layout("`Layout Elements`") html/LayoutandSectioningGroup -.-> html/nav_links("`Navigation and Links`") html/LayoutandSectioningGroup -.-> html/doc_flow("`Document Flow Understanding`") html/FormsandInputGroup -.-> html/forms("`Form Elements`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") subgraph Lab Skills html/head_elems -.-> lab-445678{{"`基于网络的HTML演示文稿生成器`"}} html/layout -.-> lab-445678{{"`基于网络的HTML演示文稿生成器`"}} html/nav_links -.-> lab-445678{{"`基于网络的HTML演示文稿生成器`"}} html/doc_flow -.-> lab-445678{{"`基于网络的HTML演示文稿生成器`"}} html/forms -.-> lab-445678{{"`基于网络的HTML演示文稿生成器`"}} html/inter_elems -.-> lab-445678{{"`基于网络的HTML演示文稿生成器`"}} end

设置项目结构

在这一步中,你将设置项目文件和结构。按照以下步骤完成此步骤:

打开项目文件夹。目录结构如下:

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

其中:

  • css/style.css 是样式表。
  • images 文件夹包含页面中使用的图标。
  • js/index.js 是页面的JavaScript文件。
  • js/jquery-3.6.0.min.js 是jQuery文件。
  • index.html 是主页。

点击WebIDE右下角的 Go Live 按钮来运行项目。

接下来,在虚拟机顶部打开 “Web 8080” 并手动刷新以查看页面。

实现 switchPage 函数

在这一步中,你将学习如何实现 switchPage 函数以在PPT页面之间进行切换。

  1. 打开 js/index.js 文件。
  2. 找到 switchPage 函数并添加以下代码:
function switchPage() {
  $("section").eq(activeIndex).show().siblings().hide();
  $(".btn.left").toggleClass("disable", activeIndex === 0);
  $(".btn.right").toggleClass("disable", activeIndex + 1 === sectionsCount);
  $(".page").text(`${activeIndex + 1} / ${sectionsCount}`);
}

解释:

  • $("section").eq(activeIndex).show().siblings().hide();:这一行显示当前页面(章节)并隐藏所有其他页面。
  • $(".btn.left").toggleClass("disable", activeIndex === 0);:当用户位于第一页时,这一行将 “上一页” 按钮添加 disable 类,而当用户位于任何其他页面时则移除该类。
  • $(".btn.right").toggleClass("disable", activeIndex + 1 === sectionsCount);:当用户位于最后一页时,这一行将 “下一页” 按钮添加 disable 类,而当用户位于任何其他页面时则移除该类。
  • $(".page").text(${activeIndex + 1} / ${sectionsCount});:这一行更新页面左下角的页码显示。
  1. 保存 js/index.js 文件。

现在,switchPage 函数已实现,页面切换功能应按预期工作。

处理用户输入

在这一步中,你将学习如何处理用户输入,例如键盘按键和按钮点击,以便在PPT页面间导航。

  1. 打开 js/index.js 文件。
  2. 找到事件监听器代码并添加以下代码:
// 监听用户按下空格和箭头键
$(document).on("keydown", (e) => {
  e.preventDefault();
  // TODO
  if (e.key === " " || e.key === "ArrowRight") {
    goRight();
  }
  if (e.key === "ArrowLeft") {
    goLeft();
  }
});

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

解释:

  • 第一个事件监听器监听文档上的keydown事件。当用户按下空格键或右箭头键时,调用 goRight() 函数。当用户按下左箭头键时,调用 goLeft() 函数。
  • 第二组事件监听器监听 “上一页” 和 “下一页” 按钮的点击事件。当用户点击 “上一页” 按钮时,调用 goLeft() 函数。当用户点击 “下一页” 按钮时,调用 goRight() 函数。
  1. 保存 js/index.js 文件。

现在,用户输入处理已实现,用户可以使用键盘或按钮在PPT页面间导航。

实现 goLeftgoRight 函数

在这一步中,你将学习如何实现 goLeftgoRight 函数来处理PPT页面之间的导航。

  1. 打开 js/index.js 文件。
  2. 找到 goLeftgoRight 函数并添加以下代码:
// 切换到下一页的函数
function goLeft() {
  // TODO
  if (activeIndex === 0) {
    return;
  }
  activeIndex -= 1;
  switchPage();
}

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

解释:

  • goLeft 函数检查用户是否在第一页。如果是,则不做任何操作直接返回。否则,它会将 activeIndex 变量减1,并调用 switchPage 函数来更新显示。
  • goRight 函数检查用户是否在最后一页。如果是,则不做任何操作直接返回。否则,它会将 activeIndex 变量加1,并调用 switchPage 函数来更新显示。
  1. 保存 js/index.js 文件。

现在,goLeftgoRight 函数已经实现,用户可以使用键盘或按钮在PPT页面间导航。

页面的最终效果应如下所示:

图像描述
✨ 查看解决方案并练习

总结

恭喜!你已完成此项目。你可以在LabEx中练习更多实验以提升你的技能。

您可能感兴趣的其他 HTML 教程