大电影

作者:江月迟迟

发表于:2024-12-10

字数统计:1434 字

预计阅读5分钟

介绍

一千个人眼里就有一千个哈姆雷特，小蓝最近痴迷于电影，但无奈学习任务繁重，只好先将电影收藏起来，留着以后观看，但是电影网站的收藏功能居然失效了，请你帮忙修复这个 bug 吧。

准备

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

txt

├── css
│   └── style.css
├── images
├── index.html
└── js
    └── jquery.min.js

其中：

index.html 是主页面。
js/jquery.min.js 是 jQuery 文件。
images 是图片文件夹。
css/style.css 是样式文件。

选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。

接着，打开环境右侧的【Web 服务】，就可以在浏览器中看到如下效果：

图片描述

目标

请使用 jQuery 或者 js ，完成 index.html 文件中的 TODO 部分。

点击收藏图标，收藏图标在空心（images/hollow.svg）和实心（images/solid.svg）中进行切换。
点击收藏图标后，仅在收藏图标为实心图形时，成功提示框（class=toast__container）元素显示，2 秒后该提示框自动隐藏或者点击提示框上面的关闭按钮（class=toast__close）该提示框隐藏。请使用 display 属性设置元素的显示隐藏。

完成后，最终页面效果如下：

图片描述

规定

请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。
满足题目需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动判分

判分标准

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

总通过次数: 881 | 总提交次数: 927 | 通过率: 95%

难度: 中等标签: 2022, 省模拟赛, Web 前端, jQuery

题解

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/style.css" />
    <title>大电影</title>
    <script src="./js/jquery.min.js"></script>
  </head>

  <body>
    <div class="container">
      <!-- Batman -->
      <div class="card u-clearfix">
        <div class="card-media">
          <img src="./images/lmf1.jpg" alt="" class="card-media-img" />
          <div class="card-media-preview u-flex-center">
            <img src="./images/play.svg" alt="" />
          </div>
          <span class="card-media-tag card-media-tag-orange">Action</span>
        </div>
        <div class="card-body">
          <h2 class="card-body-heading">Batman</h2>
          <div class="card-body-options">
            <div class="card-body-option card-body-option-favorite">
              <img src="./images/hollow.svg" alt="" />
            </div>
            <div class="card-body-option card-body-option-share">
              <img src="./images/share.svg" alt="" />
            </div>
          </div>
          <ul class="card-body-stars u-clearfix"></ul>
          <a href="#/" class="card-button card-button-cta"> Buy $12.99 </a>
          <a href="#/" class="card-button card-button-link">
            More info
            <span class="card-button-icon">
              <img src="./images/more.svg" alt="" />
            </span>
          </a>
        </div>
      </div>
      <!-- Lone Ranger -->
      <div class="card u-clearfix">
        <div class="card-media">
          <img src="./images/lmf2.jpg" alt="" class="card-media-img" />
          <div class="card-media-preview u-flex-center">
            <img src="./images/play.svg" alt="" />
          </div>
          <span class="card-media-tag card-media-tag-brown">Western</span>
        </div>
        <div class="card-body">
          <h2 class="card-body-heading">Lone Ranger</h2>
          <div class="card-body-options">
            <div class="card-body-option card-body-option-favorite">
              <img src="./images/hollow.svg" alt="" />
            </div>
            <div class="card-body-option card-body-option-share">
              <img src="./images/share.svg" alt="" />
            </div>
          </div>
          <ul class="card-body-stars u-clearfix"></ul>
          <a href="#/" class="card-button card-button-cta"> Buy $12.99 </a>
          <a href="#/" class="card-button card-button-link">
            More info
            <span class="card-button-icon">
              <img src="./images/more.svg" alt="" />
            </span>
          </a>
        </div>
      </div>

      <!-- Superman -->
      <div class="card u-clearfix">
        <div class="card-media">
          <img src="./images/lmf3.jpg" alt="" class="card-media-img" />
          <div class="card-media-preview u-flex-center">
            <img src="./images/play.svg" alt="" />
          </div>
          <span class="card-media-tag card-media-tag-orange">Action</span>
        </div>
        <div class="card-body">
          <h2 class="card-body-heading">Superman</h2>
          <div class="card-body-options">
            <div class="card-body-option card-body-option-favorite">
              <img src="./images/hollow.svg" alt="" />
            </div>
            <div class="card-body-option card-body-option-share">
              <img src="./images/share.svg" alt="" />
            </div>
          </div>
          <ul class="card-body-stars u-clearfix"></ul>
          <a href="#/" class="card-button card-button-cta"> Buy $12.99 </a>
          <a href="#/" class="card-button card-button-link">
            More info
            <span class="card-button-icon">
              <img src="./images/more.svg" alt="" />
            </span>
          </a>
        </div>
      </div>
    </div>
    <div class="floating-action-button u-flex-center">
      <svg
        fill="#ffffff"
        height="24"
        viewBox="0 0 24 24"
        width="24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"
        />
        <path d="M0 0h24v24H0z" fill="none" />
      </svg>
    </div>

    <div id="toast__container">
      <div class="toast__cell">
        <div class="toast toast--green">
          <div class="toast__icon">
            <img src="./images/icon.svg" alt="" />
          </div>
          <div class="toast__content">
            <p class="toast__type">Success</p>
            <p class="toast__message">
              Congratulations, added to the Favorites successfully
            </p>
          </div>
          <div class="toast__close">
            <img src="./images/close.svg" alt="" />
          </div>
        </div>
      </div>
    </div>
    <script>
      // 评分星星的 DOM 结构
      let starInerHtml = `<li><img src="images/star.svg" alt=""></li>`;
      for (let index = 0; index < 5; index++) {
        $(".card-body-stars").append(starInerHtml);
      }
      // TODO：待补充代码
      const favoriteBtns = document.querySelectorAll('.card-body-option-favorite')
      favoriteBtns.forEach(item => {
        item.addEventListener('click', () => {
          if (item.children[0].src.includes('hollow.svg')) {
            item.children[0].src = './images/solid.svg'
            let messageBox = document.getElementById('toast__container')
            console.log(messageBox);
            let toastCloseBtn = document.getElementsByClassName('toast__close')[0]
            messageBox.style.display = 'block'
            toastCloseBtn.addEventListener('click', () => {messageBox.style.display = 'none'})
            setTimeout(() => {messageBox.style.display = 'none'}, 2000)
          } else {
            item.children[0].src = './images/hollow.svg'
          }
        })
      })
    </script>
  </body>
</html>

大电影 ​

介绍 ​

准备 ​

目标 ​

规定 ​

判分标准 ​

题解 ​

大电影

介绍

准备

目标

规定

判分标准

题解