芝麻开门

作者:江月迟迟

发表于:2024-12-10

字数统计:948 字

预计阅读4分钟

介绍

在阿里巴巴和四十大盗的故事中，阿里巴巴因为无意中知道了开门的咒语人生发生了翻天覆地的变化，四十大盗也因为咒语的泄露最终丧命。芝麻开门的咒语作为重要的信息推动着故事的发展。下面由你来为门设置这道机关，输入芝麻开门后才能放行。

准备

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

    ├── index.css
    ├── index.html
    └── index.js

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

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

点击页面上的“点击弹出对话框，输入咒语”按钮，无任何反应。

目标

找到 index.js 文件中的 mPrompt 函数，完成函数中的 TODO 部分。

1. 点击“点击弹出对话框，输入咒语”按钮会调用 mPrompt 函数，mPrompt 调用后页面显示对话框。mPrompt 函数必须返回一个 promise 对象。
2. 在对话框中的输入框中输入文字后，点击确认按钮，对话框消失， promise 返回成功，promise 成功的值为输入的值。
3. 只有当成功的值为“芝麻开门”时门自动打开（已实现）。
4. 点击取消，对话框消失，promise 返回失败，失败的值为 false。
5. 对话框的显示隐藏请使用 DOM 节点的添加删除实现。

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

规定

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

判分标准

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

总通过次数: 1690 | 总提交次数: 1724 | 通过率: 98%

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

题解

const incantations = "芝麻开门";
function init(el) {
  document.querySelector(".wrapper .btn").addEventListener("click", () => {
    mPrompt()
      .then((res) => {
        if (res === incantations) {
          document
            .querySelectorAll("#door .doors")[0]
            .classList.add("door-left");
          document
            .querySelectorAll("#door .doors")[1]
            .classList.add("door-right");
        }
      })
      .catch((err) => {
        console.log(err);
      });
  });
}
/**
 * @description: 调用函数，开启弹窗，记录输入框的内容，并通过 promise 异步返回输入框中的内容
 * @return {Promise}
 */
function mPrompt() {
  // 弹窗必须使用以下结构 template 保存的是弹窗的结构字符串，可以先转化为 DOM 再通过 appendChild 方式插入到 body 中
  const template = `
        <div class="modal">
            <div class="message-box">
                <div class="message-header">请输入咒语</div>
                <div class="message-body">
                    <input type="text">
                </div>
                <div class="message-footer">
                    <button class="btn btn-small" id='cancel'>取消</button>
                    <button class="btn btn-small btn-primary" id='confirm'>确定</button>
                </div>
            </div>
        </div>
    `;
  const div = document.createElement("div");
  // TODO：待补充代码
  // 1. 插入输入框
  div.innerHTML = template;
  document.body.appendChild(div);

  const cancelBtn = document.getElementById("cancel");
  const confirmBtn = document.getElementById("confirm");
  const inputContent = document.querySelector(".message-body input");
  return new Promise((resolve, reject) => {
    cancelBtn.addEventListener("click", () => {
      // 2. 取消的事件
      // 2.1 对话框消失
      document.body.removeChild(div);
      // 2.2 返回promise
      reject(false);
  });
    // 3. 确定的事件   
    confirmBtn.addEventListener("click", () => {
      // 3.1 对话框消失
      document.body.removeChild(div);
      // 3.2 返回promise
      resolve(inputContent.value);
    });
});

 
}