每日一题：开学礼物大放送
开学礼物大放送介绍又是一年开学季，蓝桥为大家准备了开学礼物，想制作一个页面来宣传一下该活动。
本题需要按照要求完成一个以“开学季”为主题的页面布局。
准备开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：
1234567├── css│ └── style.css├── images├── mark│ ├── preview│ └── index.html└── index.html
其中：
css/style.css 是样式文件。
images 是页面布局需要用到的图片素材。
mark/preview 是页面效果图。
mark/index.html 是布局参数标记页面。
index.html 是主页面。
注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：
12cd /home/projectwget https://labfile.oss.aliyuncs.com/courses/9788/05.zip && unzip 05.zip && rm 05.zip
目标请完善 css/style.css 和 index. ...
每日一题：消失的Token
消失的 Token介绍小蓝开发了一个登录功能，但是在登录界面中输入用户名后点击“确认”按钮并没有如预期般成功进入欢迎界面。但是从出现欢迎语来看，数据已经发生了改变，到底是怎么回事呢？请帮助小蓝排查代码，让登录功能回归正常吧！
准备目录结构如下：
12345678910111213├── components│ ├── login.js│ └── panel.js├── css│ └── style.css├── index.html├── lib│ ├── vue.min.js│ └── vuex.min.js└── store ├── BaseModule.js ├── UserModule.js └── index.js
其中：
index.html 是主页面。
components 是为示例组件文件夹。
lib 是存放项目相关依赖的文件夹。
store 是 Vuex 状态管理文件夹。
css 是存放项目样式的文件夹。
注意：打开环境后发现缺少项目代码，请复制下述命令至命令行进行下载。
12345cd /home/projectwget ...
每日一题：画一只考拉
画一只考拉介绍CSS3 的 Flex 弹性布局和 Grid 网格布局已经成为前端页面排版的主流选择。
本次挑战将使用这两种布局方式来画一只考拉。
准备本题已经内置了初始代码，打开实验环境，目录结构如下：
12├── styles.css└── index.html
文件说明如下：
styles.css 是页面样式文件。
index.html 是页面布局结构。
你可以参考如下步骤访问项目：
选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。
打开环境右侧的 Web 服务，就可以在浏览器中看到未完成的考拉。
目标请根据 styles.css 文件中的提示和要求添加所需的 CSS 代码，完整地画出一只如下效果的考拉：
创造一个网格布局，6 个纵列（column）：前后两列两等分（可用 fr 代表一份），中间 4 列均为 25px 宽度；4 个横行（row）：上下均为 50px，中间两等分。
绘制眼睛：长为 30px，高为 30px，颜色为 #090b0e，圆角为 50%，位置居中。
绘制鼻子：高为 ...
每日一题：绝美宋词
绝美宋词介绍“今宵酒醒何处，杨柳岸晓风残月”，“蓦然回首，那人却在灯火阑珊处”，“试问闲愁都几许？一川烟草，满城风絮，梅子黄时雨” ……
宋词可谓是古代文学桂冠上一颗璀璨的明珠，本题将实现一个在搜索框中输入关键字，实时显示符合条件的完整宋词的功能。
准备本题已经内置了初始代码，打开实验环境，目录结构如下：
1234567├── css│ └── style.css├── data.json├── index.html└── js ├── axios.min.js └── vue.min.js
其中：
index.html 是主页面。
js/vue.min.js 是项目用到的 vue2.x 版本文件。
js/axios.min.js 是 axios 文件。
data.json 是项目中需要用到宋词数据。
css/style.css 是样式文件。
选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。
接着，打开环境右侧的【Web 服务】，就可以在浏览器中看到如下效果：
目标请使用 Vue ，完 ...
每日一题：视频弹幕
视频弹幕介绍弹幕指直接显现在视频上的评论，可以以滚动、停留甚至更多动作特效方式出现在视频上，是观看视频的人发送的简短评论。通过发送弹幕可以给观众一种“实时互动”的错觉，弹幕的出现让观看过程充满乐趣。本题需要在已提供的基础项目中，完成视频弹幕的功能。
准备开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：
12345678├── effect.gif ├── css│ └── index.css├── video│ └── video1.webm├── index.html└── js └── index.js
其中：
index.html 是主页面。
js/index.js 是需要补充代码的 js 文件。
css/index.css 是样式文件。
effect.gif 是完成的效果图。
video 是存放视频的文件夹。
注意：打开环境后发现缺少项目代码，请手动输入下述命令进行下载：
123cd /home/projectwget -q https://labfile.oss.aliyuncs.com/courses/18213/test6.zipunzip t ...
每日一题：菜单树检索
【功能实现】菜单树检索背景介绍实际工作中很多前端攻城狮都会遇到这样一个需求：在多级菜单树中模糊搜索匹配的菜单项，并显示出来。
本题需要在已提供的基础项目中使用 Vue.js 知识，实现对已提供的二级菜单树的动态渲染及模糊搜索功能，最终将符合搜索要求的二级菜单树显示在页面中。
步骤准备在开始答题前，你需要在线上环境终端中键入以下命令，下载并解压所提供的文件。
1wget https://labfile.oss.aliyuncs.com/courses/7835/exam11-imi.zip && unzip exam11-imi.zip && rm exam11-imi.zip
下载完成之后的目录结构如下：
123456├── data.json # 二级菜单总数据├── index.html # 页面布局└── js ├── axios.min.js # 用于异步获取数据的 Ajax 封装库 ├── index.js # 页面功能实现的逻辑代码 └── vue.js # 版本为 2.x 的 Vue.js 框架
源码下载后，选中 inde ...
每日一题：布局切换
布局切换介绍经常用手机购物的同学或许见过这种功能，在浏览商品列表的时候，我们通过点击一个小小的按钮图标，就能快速将数据列表在大图（通常是两列）和列表两种布局间来回切换。
本题需要在已提供的基础项目中使用 Vue 2.x 知识，实现切换商品列表布局的功能。
准备开始答题前，需要先打开本题的项目文件夹，目录结构如下：
12345678├── effect.gif├── goodsList.json├── css├── images├── index.html└── js ├── axios.min.js └── vue.js
其中：
effect.gif 是最终实现的效果图。
goodsList.json 是请求需要用到的数据。
css 是样式文件夹。
images 是图片文件夹。
js/vue.js 是 Vue2.x 文件。
js/axios.min.js 是 axios 文件。
index.html 是页面布局及逻辑。
注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：
12cd /home/projectwget https://labfile.oss.a ...
每日一题：偷梁换柱
偷梁换柱介绍随着医疗水平的进步，人的平均寿命在慢慢提升。现在全球平均预期寿命是 73.2 岁，而在 1950 年则只有 47 岁。那么人类的寿命有极限吗？根据最新的研究，人类寿命或超过 120 岁，达到 150 岁。
因此，有关年龄的应用普遍将当今人类的合理年龄范围设置在 0 - 150 岁之间。那么，当一个年龄被录入，我们又是如何判断其是否合理的呢？
准备本题已经内置了初始代码，打开实验环境，目录结构如下：
12├── age.js└── index.html
其中：
index.html 是主页面。
age.js 是需要补充代码的 js 文件。
目标在文件 age.js 中，有一个 person 对象，当它的 age 属性值改变时需要对新值做判断，将其永远控制在 0 - 150 之间。具体需求如下：
如果新属性值在 0 -150 之间（包含 0 和 150），则直接更新。
如果新属性值小于 0，则属性值更新为 0。
如果新属性值大于 150，则属性值更新为 150。
提示：可以使用 Object.defineProperty 或者 Proxy 对 person 对象进行 ...
每日一题：平地起高楼
平地起高楼介绍我们的国家国土面积十分的广阔，目前中国有 34 个省级行政区，包括 23 个省、5 个自治区、4 个直辖市、2 个特别行政区。其下面还有几千个县级区域，以及更多的乡镇区域。
这样层层嵌套的省市区数据在实际开发中是如何处理的呢？下面请运用所学，解开这个谜团吧～
准备本题已经内置了初始代码，打开实验环境，目录结构如下：
12├── convert-to-tree.js└── index.html
其中：
index.html 是主页面。
convert-to-tree.js 是需要补充代码的 js 文件。
目标在实际开发中，由于省市区等层级较多，使得数据结构按照嵌套关系来存储则过于复杂，一般在数据库中会将省市区数据解耦，每条信息以并列关系存储在一张表中，结构如下：
12345678910111213[ { id: "51", // 区域 id name: "四川省", // 区域名字 pid: "0", // 区域的父级区域 id }, { id: &q ...
每日一题：逃离二向箔
逃离二向箔介绍歌者文明的二向箔目前已经到达太阳系，二向箔的封装力场已经消失，接触到太阳系的三维空间后，导致三维立体空间塌陷，变成二维平面空间并不断扩展。倘若能借助曲率引擎等手段以光速先行逃离，那么摆脱二维化的命运依然是可能的。
目前人类已经开发出曲率飞船，停放飞船的港口一次性只能发送 10 辆飞船，并且飞船的启动时间为 3000ms 。下面由你来开发一个 RequestControl 类收集飞船的发射请求，依据飞船的结果自动安排下一批次的飞船发射，帮助人类逃离二向箔的打击。但是由于发射飞船的装置限制，一次最多发送的飞船有数量限制。
准备本题已经内置了初始代码，打开实验环境，目录结构如下：
12├── index.html└── main.js
其中：
index.html 是主页面。
main.js 是待补充代码的 js 文件。
在 main.js 文件中：
createRequest 方法为发射飞船请求的 promise。
RequestControl 类的 addRequest 方法收集飞船发射请求。并将飞船发射请求放入 this.requestQueue 发射队列中。
ru ...