芝麻开门

合集 - 蓝桥杯(21)

1.逃离二向箔2023-06-022.偷梁换柱2023-06-023.课程列表2023-06-024.粒粒皆辛苦2023-06-025.成语学习2023-06-026.消失的 Token2023-06-02

7.芝麻开门2023-06-02

8.资讯接口2023-06-029.防抖函数2023-06-0310.element-ui 组件二次封装2023-06-0411.心愿便利贴2023-06-0412.购物车2023-06-0413.绝美宋词2023-06-0414.布局切换2023-06-0515.和手机相处的时光2023-06-0516.天气趋势2023-06-0517.阅读吧2023-06-0518.宝贵的一票2023-06-0819.大电影2023-06-0820.封装 Promisefy 函数2023-06-0821.权限管理2023-06-08

收起

习题链接

芝麻开门

任务

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

关键点

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();   // 移除提示框
       })
   });
   

__EOF__

本文作者：GTK
本文链接：https://www.cnblogs.com/DnmyCourage/p/17452474.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！