JZTXT

芝麻开门

发布时间 2023-06-02 17:33:12作者: GTK

习题链接

芝麻开门

课程列表

现在我们有一扇门，这个门叫芝麻开门
我们要在输入框中输入芝麻开门，让门打开
这就是我们的主要任务

关键点

  1. Promise用法
    1. 在promise对象中有两个方法resolve,reject方法
    2. resolve对应 promise 的状态是完成 对应的方法是then方法
    3. reject 对应 promise 的状态是拒绝 对应的方法是catch方法
  2. addEventListener 监听事件
    1. 主要两个参数，还有一个可选参数（可选就是可要可不要咯）
    2. （必要）第一个参数是事件类型一般有click,input,change等
    3. （必要）第二个参数是回调函数，当触发了监听事件，就会执行回调函数
    4. （可选，本次题目可无需理会，只作为扩展了解）{ once: true, capture: true } 这个one指的执行一次，capture是捕获还是冒泡，默认是在冒泡阶段执行函数
  3. 读题很重要
    1. 直接观看题目中的目标部分会告诉你具体要做什么事情

代码实现 && 完整的代码

  1. 完成第一件事情，点击“点击弹出对话框，输入咒语”弹出对话框
    const div = document.createElement("div");
// TODO：待补充代码
div.innerHTML = template; // template题目提供的
document.body.appendChild(div);
  2. 返回一个promise对象
    const div = document.createElement("div");
// TODO：待补充代码
div.innerHTML = template; // template题目提供的
document.body.appendChild(div);
return new Promise((resolve, reject) => {
    let btnCancel = document.getElementById("cancel");      // 取消按钮
    let btnConfirm = document.getElementById("confirm");    // 确定按钮
    let input = document.getElementsByTagName("input")[0];  // 输入框
    btnCancel.addEventListener('click',function () {   
        document.getElementsByClassName('modal')[0].remove();   // 移除提示框
    })
    btnConfirm.addEventListener('click',function () {
        console.log(input.value); // 打印输入的值
        document.getElementsByClassName('modal')[0].remove();   // 移除提示框
    })
});
  3. 根据题目要求，点击取消返回false，确定就返回对话框的值 && 完整code
    const div = document.createElement("div");
// TODO：待补充代码
div.innerHTML = template; // template题目提供的
document.body.appendChild(div);
return new Promise((resolve, reject) => {
    let btnCancel = document.getElementById("cancel");      // 取消按钮
    let btnConfirm = document.getElementById("confirm");    // 确定按钮
    let input = document.getElementsByTagName("input")[0];  // 输入框
    btnCancel.addEventListener('click',function () {   
        resolve(false);       // 返回false
        document.getElementsByClassName('modal')[0].remove();   // 移除提示框
    })
    btnConfirm.addEventListener('click',function () {
        resolve(input.value); // 打印输入的值
        document.getElementsByClassName('modal')[0].remove();   // 移除提示框
    })
});