每日一题：趣购
趣购介绍在线购物几乎已经是现代生活必备的一环，每年的 618，双 11 都是购物的狂欢。我们几乎可以在线上购物商城买到一切日常所需。
本题需要在已提供的基础项目中，使用 Web 原生拖拽事件实现在线购物的功能。
准备开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：
123456789101112├── images│ ├── book.jpeg│ ├── box.jpeg│ ├── paper.jpeg│ ├── trolley.jpeg│ └── tv.jpg├── index.html├── effect.gif├── js│ ├── http-vue-loader.js│ └── vue.min.js└── trolley.vue
其中：
index.html 是主页面。
effect.gif 是最终实现的效果图。
images 文件夹提供的页面所需要的商品图片。
js/vue.min.js、js/http-vue-loader.js 是 vue 库相关文件。
trolley.vue 是需要补充代码的组件文件。
注意：打开环境后发现缺少项 ...
每日一题：外卖给好评
外卖给好评介绍外卖是现代生活中必备的一环。收到外卖后，各大平台软件常常会邀请用户在口味，配送速度等多个方面给与评分。在 element-ui 组件中，已经有相应的 Rate 组件，但是已有组件只能对单一维度进行评分，在外卖评分这种场景中，样式基本上是固定的，功能也基本一样。若每写一个页面都要去复制一份类似代码，就会产生大量重复的代码，既不利于后期的维护，代码也不够简洁。为此需要前端工程师对 element-ui 的原 Rate 组件进行二次封装。
准备开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：
1234567891011├── element-ui-2.6.2│ ├── element-icons.ttf│ ├── element-icons.woff│ ├── element-ui.min.js│ └── element-ui.style.css├── index.html├── js│ ├── http-vue-loader.js│ └── vue.min.js├── my-rate.vue└── effect.gif
其中：
index. ...
每日一题：寻找小狼人
寻找小狼人介绍“狼人杀”是一款多人参与的策略类桌面游戏。本题我们一起完成一个简易的狼人杀游戏，让我们找到其中的狼人。
准备开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：
1234567├── css│ └── style.css├── images│ └── card.svg├── index.html└── js └── myarray.js
其中：
css/style.css 是样式文件。
index.html 是主页面。
images 是图片文件夹。
js/myarray.js 是需要补充的 js 文件。
注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：
12cd /home/projectwget https://labfile.oss.aliyuncs.com/courses/9791/09.zip && unzip 09.zip && rm 09.zip
在浏览器中预览 index.html 页面效果如下：
目标在本题 index.html 已经给出的数组中，我们可以通过数组的 filter 方法 ...
每日一题：别抖了（防抖函数
别抖了（防抖函数）介绍在平时的网页交互中，常常会有一些高频操作的场景，比如：
登录、发短信等按钮避免用户点击太快，以致于发送了多次请求。
调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多。
文本编辑器实时保存。
上面这些场景在实际交互中会不断地调用绑定在事件（如：浏览器的 resize、scroll、keypress、mousemove 等）上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，需要对这类事件进行调用次数的限制，对此我们就可以采用防抖（debounce）的方式来减少调用频率。
来看一下防抖的定义：n 秒后再执行某个函数，若该函数在 n 秒内被重复触发，则重新计时。
用一个比喻来说明就是：比如坐电梯，把电梯完成一次运送看作是一次函数的执行过程，那么电梯门关上的那一刻，则为开始执行函数的标志。假设电梯从检测到有人进入到关门之间的等待时间为 15 秒，不考虑容量限制，电梯第一个人进来后，等待 15 秒。如果过程中又有人进来，15 秒等待重新计时，直到最后检测到有人进入，并在之后的 15 秒内不再有人进入才会开始运送。
准备本题已经内置了初始代码，打开实验 ...
每日一题：封装promisefy
封装 Promisefy 函数介绍我们知道在浏览器中 JavaScript 是单线程运行的，而回调函数曾经是 JavaScript 中实现异步函数的主要方式，面对这样的嵌套回调，处理错误也会变得非常困难：你必须在“金字塔”的每一级处理错误，而不是在最高一级一次完成错误处理，所以大多数现代异步 API 采用的都是 Promise 的形式。
下面就请你以 Node.js 中常用的读取文件操作为例，封装一个 Promisefy 函数，将回调形式调用的读取文件方法转换成一个 Promise 的版本。
准备目录结构如下：
12├── index.js└── test.md
其中：
index.js 是需要补充代码的 js 文件。
test.md 供读取的示例文件。
注意：打开环境后发现缺少项目代码，请复制下述命令至命令行进行下载。
12345cd /home/projectwget https://labfile.oss.aliyuncs.com/courses/18164/dist_01.zipunzip dist_01.zipmv dist/* ./rm -rf dist*
目标请在 ...
每日一题：资讯接口
资讯接口介绍随着技术的发展，很多前端工程师已经不满足于只做诸如页面布局和交互这些开发工作了，很多人将目光逐渐转向了“大前端”范围，其中就包括不需要依赖后端提供接口自己就可以使用 node.js 编写一个后端接口服务。
下面就让我们也来使用 node.js 完成一个新闻资讯接口吧。
准备本题已经内置了初始代码，打开实验环境，目录结构如下：
1└── app.js
目标
通过在 app.js 书写代码，创建一个服务器，使服务在 8080 端口运行。
访问 /news 返回资讯数据，访问其他任意路径均返回字符串 404 。
Url
请求方式
参数
响应结果
news
GET
空
显示资讯数据
数据需要设置为 utf8 格式，资讯数据格式如下：
12345678910[ { "channelId": "5572a108b3cdc86cf39001cd", "name": "国内焦点" }, { "channelId" ...
每日一题：由文本溢出引出的不友好体验
由文本溢出引发的“不友好体验”背景介绍通常情况下，为保证布局的稳定性，以及遵循在有限的空间展示更多内容的原则，页面的某块区域不会随内容的增多而无限增高或增宽，一般会有一个约束。
例如：整体元素过多可以使用滚动条；文字内容过多可以使用文本溢出处理。
这些情况在实际开发中经常遇到。例如电商平台的商品列表中对商品的描述通常是简短的介绍，详细的介绍需要点击进去才能看到。
如下图所示：
如果不进行限制，那就会变成这样：
这么一看对用户而言，是不是体验很不好，商品的简介把价格都遮挡住了。因此，解决这样的问题成为日常开发中不可或缺的需求。
本节挑战中，就有类似的场景：页面中某块区域的文本内容过多，导致占用了其他内容的空间。效果如下图所示：
上图文本中一共占用了 11 行文本。实际需求中，我们只希望显示 2 行即可，剩余的内容用省略号（…）替代。
通常，处理这类问题的方式有以下几种：
使用 JS 处理，先将字符串按照一定长度进行切割，去掉超出部分的内容，然后在末尾拼接省略号。
使用 CSS3 处理，利用相关的 Webkit 属性，结合 overflow 属性通过样式实现。
本节挑战，你需要开 ...
每日一题：地球漫游
地球漫游介绍“地球漫游”：一款基于 CSS 动画的小型网页应用，让您身临其境地感受地球绕着太阳公转的奇妙旅程。通过这个应用，您可以观察地球绕着太阳的运动轨迹和速度，感受到宇宙的浩瀚和神秘。
准备本题已经内置了初始代码，打开实验环境，目录结构如下：
123├── css│ └── style.css└── index.html
其中:
index.html 是主页面。
css/style.css 是需要补充代码的 css 文件。
注意：打开环境后发现缺少项目代码，请复制下述命令至命令行进行下载。
12cd /home/projectfile="earth" && wget "https://labfile.oss.aliyuncs.com/courses/19791/${file}.zip" && unzip "${file}.zip" && rm "${file}.zip"
选中 index. ...
每日一题：传送门
传送门介绍日常浏览网页的时候，我们会发现一个问题，当页面太长、内容太多的时候我们很难快速浏览到心仪的内容。为了解决这个烦恼，优秀的产品研发团队发明了一种类似传送门的功能，以便用户能通过它快速定位到感兴趣的内容。这个功能也被通俗地比喻为“电梯”。
本题需要在已提供的基础项目中使用 JS/jQuery 等知识完善代码，最终实现该功能。
准备开始答题前，需要先打开本题的项目文件夹，目录结构如下：
1234567├── effect.gif├── index.html├── css├── images└── js ├── index.js └── jquery-3.6.0.min.js
其中：
effect.gif 是最终实现的效果图。
index.html 是主页面。
css 是样式文件夹。
images 是素材图片文件夹。
js/index.js 是需要补充代码的 js 文件。
js/jquery-3.6.0.min.js 是 jQuery 文件。
注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：
12cd /home/projectwget https:// ...
每日一题：为图片添加景深效果
为图片添加景深效果背景介绍大家在平时浏览网页的时候有没有见过下面这样的效果呢？
我们看到，图片的近处是模糊的，而远处是清晰的，我们把这种效果称为景深。
CSS 中有一个属性可以支持元素的平移、旋转、缩放或倾斜。同时，CSS 中还有一个属性可以将模糊或颜色偏移等图形效果应用于元素。大家可以试着通过 MDN 或者其他方式查找哪些 CSS 属性可以满足上述需求。
通常，我们会在 CSS 中对需要应用上述效果的元素直接书写相应的属性值。但是，如何根据场景动态修改上述属性值也是日常业务中常见的需求。
本节挑战，我们为大家提供这样的场景，希望大家能通过 JS 的方式为图片动态添加景深效果。
准备步骤开始答题前，你需要确保基础代码已下载。如果没有成功下载，请点击并打开右侧环境窗口，然后在终端中键入以下命令，下载页面的基础代码：
1wget https://labfile.oss.aliyuncs.com/courses/9203/06.zip && unzip 06.zip && rm 06.zip && cd 06
具体操作参考下图：
接着，点击 ...