交互式电影收藏 | 网页开发教程

介绍

在这个项目中，你将学习如何使用 HTML、CSS 和 JavaScript（jQuery）创建一个交互式电影收藏网络应用程序。该应用程序允许用户标记他们喜欢的电影，当创建了一个喜欢的电影集合时，会显示一条成功消息。

👀 预览

交互式电影收藏演示

🎯 任务

在这个项目中，你将学习：

如何设置项目文件并在编辑器中打开项目
如何实现收藏图标功能，允许用户在空心和实心状态之间切换
如何实现集合图标功能，当添加至少一部喜欢的电影时显示成功消息

🏆 成果

完成这个项目后，你将能够：

使用 jQuery 操作 DOM
处理用户交互和事件
根据特定条件显示和隐藏元素
使用定时器在一定时间后自动隐藏元素

设置项目结构

在这一步中，你将设置项目文件并在编辑器中打开项目。

打开编辑器，你应该会看到以下文件：index.html、style.css、jquery.min.js 以及 images 文件夹。
点击 WebIDE 右下角的 Go Live 按钮来运行项目。
在虚拟机顶部打开“Web 8080”并手动刷新以查看页面。

未完成的项目结构

实现收藏图标功能

在这一步中，你将实现收藏图标的功能。

在 index.html 文件中，找到收藏图标的代码：

<div class="card-body-option card-body-option-favorite">
  <img src="./images/hollow.svg" alt="" />
</div>

在 index.html 文件底部的 <script> 部分添加以下 JavaScript 代码：

window.timer = null;
let flag = false;
$(".card-body-option-favorite").click(function () {
  flag = !flag;
  if (flag) {
    $(this).find("img").attr("src", "./images/solid.svg");
    $("#toast__container").show();
    timer = setTimeout(() => {
      $("#toast__container").fadeOut();
    }, 2000);
  } else {
    $(this).find("img").attr("src", "./images/hollow.svg");
  }
});

$(".toast__close img").click(function () {
  $("#toast__container").fadeOut();
});

这段代码会在用户点击收藏图标时，在空心和实心状态之间切换收藏图标。当点击收藏图标时，如果图标变为实心，成功框（class=toast__container）元素才会显示，2 秒后该框会自动隐藏，或者通过点击框上方的关闭按钮（class=toast__close）来隐藏该框。

保存 index.html 文件。
刷新浏览器以查看最终结果。

效果如下：

收藏图标切换演示

恭喜！你已成功完成“电影收藏”项目。

总结

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