每日一题：粒粒皆辛苦
粒粒皆辛苦介绍俗话说“民以食为天”，粮食的收成直接影响着民生问题，通过对农作物产量的统计数据也能分析出诸多实际问题。
接下来就让我们使用 ECharts 图表，完成 X 市近五年来的农作物产量的统计图吧～
准备本题已经内置了初始代码，打开实验环境，目录结构如下：
12345├── data.json├── index.html└── js ├── axios.min.js └── echarts.min.js
其中：
index.html 是主页面。
js/echarts.min.js 是 ECharts 文件。
js/axios.min.js 是 axios 文件。
data.json 是对应年份的粮食产量数据，单位为万吨。
选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。
接着，打开环境右侧的【Web 服务】，就可以在浏览器中看到如下效果：
目标请完成 index.html 文件中的 TODO 部分。
完成数据请求（数据来源 ./data.json）。
data.json 中的数据中 ...
每日一题：灯的颜色变化
灯的颜色变化介绍我们经常会看到各种颜色的灯光，本题我们将实现一个颜色会变化的灯的效果。
准备开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：
12345678├── effect.gif├── images│ ├── greenlight.svg│ ├── light.svg│ └── redlight.svg├── index.html└── js └── trafficlights.js
其中：
index.html 是主页面。
images 是图片文件夹。
js/trafficlights.js 是需要补充的 js 文件。
effect.gif是最终实现的效果图。
注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：
12cd /home/projectwget https://labfile.oss.aliyuncs.com/courses/9791/04.zip && unzip 04.zip && rm 04.zip
在浏览器中预览 index.html 页面效果如下：
目标完成 js/traffi ...
每日一题：时间管理大师
【功能实现】时间管理大师背景介绍时间管理永远都是提升工作和学习效率的必备法门，你在平时的工作学习中是否也有做计划和管理计划的习惯呢？
本题需要在已提供的基础项目中使用 Vue.js 知识实现一个简易的任务管理器。
步骤准备在开始答题前，你需要在线上环境终端中键入以下命令，下载并解压所提供的文件。
1wget https://labfile.oss.aliyuncs.com/courses/7835/exam13-imi.zip && unzip exam13-imi.zip && rm exam13-imi.zip
下载完成之后的目录结构如下：
1234567├── css│ └── style.css # 页面样式文件├── img│ └── icon.png # 页面所需小图标├── index.html # 页面布局即逻辑编码文件└── js └── vue.js # 版本为 2.x 的 Vue.js 框架
源码下载后，选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项 ...
每日一题：618活动
618 活动介绍最近蓝桥准备了很多 618 优惠，今天我们将化身蓝桥前端小工，亲自动手制作一个 618 活动页面，快来一显身手吧。
准备本题已经内置了初始代码，打开实验环境，目录结构如下：
12345678├── css│ └── style.css├── images├── index.html└── mark ├── assets ├── index.html └── preview
其中：
css/style.css 是样式文件。
images 是页面布局需要用到的图片素材。
index.html 是主页面。
mark/preview 是存放页面效果图的文件夹。
mark/index.html 是布局参数标记页面。
mark/assets 是存放 mark/index.html 页面所需图片的文件夹。
目标请完善 css/style.css 和 index.html 文件。
请根据 mark/preview 最终效果图和 mark/index.html 上的参数标注来完成页面布局。
在浏览器打开 mark/index.html 页面，鼠标点击页面可以在右 ...
每日一题：让时钟转起来
让时钟转起来背景介绍在 JavaScript 中，对于时间的处理，往往需要借助于 Date 对象操作来完成。但是，仅仅使用它来获取时间是无法满足日常业务需求的。例如，有时候我们需要将时间从枯燥的数字转化为更能吸引用户眼球的动态时钟。我们该如何实现呢？
在本节挑战中，我们就遇到了类似情况：：
上图中的动态时钟效果，是通过 HTML 和 CSS 结合 JS 中的 Date 对象来实现的。
本节挑战的代码中，还未实现秒针转动的效果。希望你能观察代码的特点，让秒针转起来。
准备步骤开始答题前，你需要确保基础代码已下载。如果没有成功下载，请点击并打开右侧环境窗口，然后在终端中键入以下命令，下载页面的基础代码：
1wget https://labfile.oss.aliyuncs.com/courses/9203/01.zip && unzip 01.zip && rm 01.zip
具体操作参考下图：
测试效果可通过如下步骤测试效果：
右键 01/index.html，选择 Open with Live Server。
点击右侧的 Web 服务。
具体操作 ...
每日一题：学海无涯
学海无涯介绍小蓝最近一直在云课平台学习，为了更好的督促自己，于是将每天的学习时间都记录了下来，但是如何更加直观的显示学习时间让小蓝很是苦恼。本题需要你使用 ECharts 帮助小蓝实现统计学习时间图表。
准备本题已经内置了初始代码，打开实验环境，目录结构如下：
1234567├── css│ └── style.css├── data.json├── index.html└── js ├── axios.min.js └── echarts.min.js
其中：
index.html 是主页面。
js/echarts.min.js 是 ECharts 文件。
js/axios.min.js 是 axios 文件。
css/style.css 是样式文件。
data.json 是学习时长数据。
选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。
接着，打开环境右侧的【Web 服务】，就可以在浏览器中看到如下效果：
目标请完成 index.html 文件中的 TODO 部分。
完成数据请求 ...
每日一题：心愿便利贴
心愿便利贴介绍小蓝发现人之间面对面交流逐渐减少，倾诉的机会变少了，有些人比较腼腆保守，不敢大声说出自己的心里话，期盼之类的，容易造成压力过大，心愿便利贴可以匿名，提供大家安全隐秘方便的倾诉平台。
小蓝希望大家写下自己的目标、理想、愿望等，激励自己奋斗，积极向上……写出来做一个精神寄托。
可是，小蓝对 Vue 语法不熟，便利贴没能完成，快来帮助小蓝完成吧！
准备本题已经内置了初始代码，打开实验环境，目录结构如下：
12345678910111213├── css│ ├── fonts│ │ ├── element-icons.ttf│ │ └── element-icons.woff│ ├── index.css│ └── wish.css├── images│ ├── bg.jfif│ └── ding.png├── index.html└── js ├── index.js └── vue.min.js
其中：
index.html 是主页面。
css 是 element-ui 存放项目样式的文件夹。
images 是图片文件夹。
j ...
每日一题：东奥大抽奖
冬奥大抽奖介绍蓝桥云课庆冬奥需要举行一次抽奖活动，我们一起做一个页面提供给云课冬奥抽奖活动使用。
准备开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：
1234567├── css│ └── style.css├── effect.gif├── index.html└── js ├── index.js └── jquery.js
其中：
css/style.css 是样式文件 。
index.html 是主页面。
js/jquery.js 是 jQuery 文件。
js/index.js 是需要补充的 js 文件。
effect.gif 是最终实现的效果图。
注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：
12cd /home/projectwget https://labfile.oss.aliyuncs.com/courses/9791/05.zip && unzip 05.zip && rm 05.zip
在浏览器中预览 index.html 页面效果如下：
目标找到 index.js 中 roll ...
每日一题：水果消消乐
水果消消乐介绍消消乐是一款益智类休闲游戏，在排队等待做核酸的时候可以打开手机玩一会，陪你度过这漫长且无聊的等待期。
本题需要实现一款水果消消乐的游戏，在 4 X 4 的格子上，消除相同的水果得两分，否则扣两分，考验一下大家的记忆力，看看最后谁的分数最多。
准备开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：
12345678910111213141516├── css│ └── style.css├── images│ ├── apple.png│ ├── cherry.png│ ├── grape.png│ ├── peach.png│ ├── pear.png│ ├── strawberry.png│ ├── tangerine.png│ └── watermelon.png├── js│ ├── index.js│ └── jquery-3.6.0.min.js├── effect.gif└── index.html
其中：
css/style.css 是样式文件。
images 是图片文件夹。
js/index.js 是实 ...
每日一题：全球新冠肺炎疫情数据统计
全球新冠疫情数据统计介绍新冠疫情席卷全球，在此期间有很多免费的 API 和网站为人们提供了各个国家疫情数据的查询功能，这些免费公开的数据体现出了互联网作为信息媒介的优越性，帮助全球人民更好的了解一线疫情信息。
本题请实现一个可以对各个国家的新冠疫情数据统计的页面。
准备开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：
123456789├── css│ └── style.css├── effect.gif├── index.html└── js ├── axios.js ├── covid-data.json ├── echarts.min.js └── vue.js
其中：
css/style.css 是样式文件。
index.html 是主页面。
js/axios.js 是 axios 文件。
js/vue.min.js 是 vue2.x 文件。
js/echarts.min.js 是 echarts 文件。
js/covid-data.json 是页面所用到的新冠数据。
effect.gif 是页面最终的效果图。
注意：打开环境后发现缺 ...