每日一题：新年贺卡
【功能实现】新年贺卡介绍新年马上到了，大家肯定有很多祝福的话语要对自己的亲人朋友说，下面我们一起来制作一张贺卡，让我们把想说的话都写在贺卡上。
准备本题已经内置了初始代码，打开实验环境，目录结构如下：
123├── index.css├── index.html└── index.js
其中：
index.css 是本次挑战的样式文件。
index.js 是本次挑战需要补充的 js 文件。
index.html 是贺卡页面。 选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。打开环境右侧的【Web 服务】。初始效果如下：
目标请仔细阅读需要完善代码部分的提示，之后完善 index.js 样式文件中的 TODO 部分，点击书写贺卡，卡片随机展示已经写好的祝福语：
规定
请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。
满足题目需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动判分。
总通过次数: 1850 | 总提交次数: 2722 | 通过率: 6 ...
每日一题：搜一搜呀
【功能实现】搜一搜呀介绍通常网站上会有搜索功能，方便用户定位搜索。本次试题我们要使用 Vue 2 的语法来完成一个关键字匹配的搜索功能。
准备本题已经内置了初始代码，打开实验环境，目录结构如下：
12345├── css│ └── style.css├── images├── index.html└── vue.min.js
其中：
css/style.css 是样式文件。
images 是项目所用到的图片文件。
index.html 是实现搜索功能的页面。
vue.min.js 是 Vue 文件。
选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。 打开环境右侧的【Web 服务】，当前页面无法正常显示。
目标请完善 index.html 文件，让页面具有如下所示的效果：
规定
请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。
满足题目需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动判分。
总通过次数: 3038 | 总提交次数: 3239 | ...
每日一题：卡片化标签页
【功能实现】卡片化标签页介绍选项卡功能在前端开发中特别常见，作为设置选项的模块，每个选项卡代表一个活动的区域，点击不同的区域，即可展现不同的内容，这样既能节约页面的空间又能提升页面性能。
本题需要在已提供的基础项目中使用 JS 完成选项卡功能的编码，最终实现切换选项卡可以显示对应内容的效果。
准备本题已经内置了初始代码，打开实验环境，目录结构如下：
123456├── css│ └── index.css # 页面样式文件├── imgs # 静态图片├── index.html # 页面布局└── js └── index.js # 页面功能实现的逻辑代码
选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。接着，打开环境右侧的【Web 服务】，就可以在浏览器中看到如下效果，当前显示仅有静态布局，并未实现选项卡切换功能。
目标请在 index.js 文件中根据现有 DOM 结构（页面布局部分不能做任何修改操作）实现选项卡动态切换功能。
页面效果如下所示：
规定
请严格按照考试步骤操作，切勿修改考 ...
每日一题：购物车
【功能实现】购物车背景介绍购物车是商城类应用里必不可少的功能，接下来，我们将使用 vue 实现一个购物车列表。
准备步骤本题已经内置了初始代码，打开实验环境，目录结构如下：
1234567891011121314├── carList.json # json 数据├── css # 样式文件夹│ ├── element-ui.css│ └── index.css├── images # 图片文件夹│ ├── img1.jpg│ ├── img2.jpg│ ├── img3.jpg│ └── img4.jpg├── index.html└── js # 项目中用到的 js 文件 ├── axios.js ├── element-ui.js └── vue.js
其中：
css 存放项目样式。
js 存放项目中用到的 js 文件。
images 存放项目中用到的图片。
carList.json 存放本次挑战需要请求的数据。
index.html 是本次挑战需要完善的布局页面。
选中 index.html 右键启动 We ...
每日一题：成语学习
成语学习介绍小楼的爸爸是一名程序员，暑假期间，发现小楼在家经常玩手机，于是决定设计一个小游戏让小楼学习成语来加强小楼对成语的理解。
接下来让我们跟着小楼来学学成语吧~
准备本题已经内置了初始代码，打开实验环境，目录结构如下：
123├── index.html└── js └── vue.min.js
选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。
接着，打开环境右侧的【Web 服务】，就可以在浏览器中看到如下效果：
目标完善 index.html 中的 confirm 方法和 getSingleWord 方法。
getSingleWord 方法：点击文字后，在变量 idiom 从左到右第一个空的位置加上该文字。
示例一：
1idiom=["","","",""]，点击热字，则idiom=["热","","",""]
示例二：
1idi ...
每日一题：echarts柱形图
echarts 柱形图背景介绍随着大数据的发展，数据统计在很多应用中显得不可或缺，echarts 作为一款基于 JavaScript 的数据可视化图表库，也成为了前端开发的必备技能，下面我们一起来用 echarts 开发一个学生数据统计的柱形图。
准备步骤在开始答题前，你需要在线上环境终端中键入以下命令，下载并解压所提供的文件。
1wget https://labfile.oss.aliyuncs.com/courses/7835/echarts.zip && unzip echarts.zip && rm echarts.zip
下载完成之后的目录结构如下：
12├── echarts.js└── index.html
你可以参考下图中的步骤访问项目：
选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。
打开环境右侧的【Web 服务】。
打开控制台，我们会发下如下报错：
在 echars 图标中，x 轴和 y 轴无论存不存在数据都必须要定义。这个报错主要是因为没有定义 ...
每日一题：element组件二次封装
element-ui 组件二次封装介绍在使用 element-ui 开发的过程中，对表格的使用比较多，且在同一个系统中表格的样式基本上是固定的，功能也基本一样。若每写一个页面都要去复制一份表格的代码，就会产生大量重复的代码，既不利于后期的维护，代码也不够简洁。为此需要前端工程师对 element-ui 的原组件进行二次封装。
准备本题已经内置了初始代码，打开实验环境，目录结构如下：
12345678├── element-ui-2.15.10│ ├── index.css│ └── index.js├── index.html├── js│ ├── http-vue-loader.js│ └── vue.min.js└── mytable.vue
其中：
index.html 是主页面。
mytable.vue 是待封装的表格组件文件。
js 是用于存放 Vue.js 相关文件的文件夹。
element-ui-2.15.10 是存放 element-ui 的文件夹。
在浏览器中预览 index.html 页面效果显示如下所示：
目标element-ui 官网上具有 ...
每日一题：随机数生成器
【算法实现】随机数生成器背景介绍实际工作中随机数的使用特别多，比如随机抽奖、随机翻牌。通过随机数还能实现很多有趣的效果，比如随机改变元素的位置或颜色。
本题需要在已提供的基础项目中使用 JS 知识封装一个函数，该函数可以根据需要，生成指定范围和个数的不重复的随机数数组。
步骤准备在开始答题前，你需要在线上环境终端中键入以下命令，下载并解压所提供的文件。
1wget https://labfile.oss.aliyuncs.com/courses/7835/exam12-imi.zip && unzip exam12-imi.zip && rm exam12-imi.zip
下载完成之后的目录结构如下：
123├── index.html # 页面布局└── js ├── index.js # 页面功能实现的逻辑代码
源码下载后，选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。
接着，打开环境右侧的【Web 服务】，就可以在浏览器中看到如下效果：
当前并未生成并显示指定 ...
每日一题：和手机相处的时光
和手机相处的时光介绍现在都提倡健康使用手机，那么统计一下在一周中每天使用手机的情况吧！本题使用 ECharts 实现统计手机使用时长的折线图，但是代码中存在 Bug 需要你去修复。
准备开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：
123├── js│ └── echarts.js└── index.html
其中：
js/echarts.js 是 ECharts 文件。
index.html 是主页面。
注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：
12cd /home/projectwget https://labfile.oss.aliyuncs.com/courses/9791/03.zip && unzip 03.zip && rm 03.zip
在浏览器中预览 index.html 页面效果显示如下所示：
目标请修复 index.html 文件中的 Bug。
让页面呈现如下所示的效果：
具体说明如下：
用折线图显示了一周当中，每天使用手机的时长。
index.html 文件里 var option ...
每日一题：分一分
分一分介绍如果给你一个数组，你能很快将它分割成指定长度的若干份吗？
本题需要在已提供的基础项目中使用 JS 知识封装一个函数，达到分割数组的要求。
准备开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：
1234├── effect.gif├── index.html└── js └── index.js
其中：
effect.gif 是最终实现的效果图。
index.html 是主页面。
js/index.js 是需要补充代码的 js 文件。
注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：
12cd /home/projectwget https://labfile.oss.aliyuncs.com/courses/9788/01.zip && unzip 01.zip && rm 01.zip
在浏览器中预览 index.html 页面，显示如下所示：
目标请在 js/index.js 文件中补全函数 splitArray 中的代码，最终返回按指定长度分割的数组。
具体要求如下：
将待分割的（一维）数组升序排序。 ...