Rossy Yan的博客

分页是前端页面中必不可少的一项功能，下面让我们一起来完成一个课程列表的分页吧。​准备步骤├── css│ └── bootstrap.css├── effect.gif├── index.html└── js ├── axios.js ├── carlist.json └── index.jscss/bootstrap.css 是项目中用到 bootstrap 样式文件。index.html 是主页面。js/carlist.json 是请求需要用到的数据。

我们注册一个账号，经常会用到步骤条填写资料，本题需要使用 jQuery 去实现步骤条表单的切换。​准备步骤├── css│ └── style.css├── js│ ├── index.js│ └── jquery-3.6.0.min.js├── effect.gif└── index.htmlcss/style.css 是样式文件。js/index.js 是实现步骤条表单切换的 js 文件。js/jquery-3.6.0.min.js 是 jQuery 文件。ef

作为前端开发的主力语言，JavaScript相关的开源项目是每一个前端开发者都应该多多关注的。我们可以通过这一年新增 star 的数量来判断一个开源项目的流行趋势。本题请实现一个展示 2022 年JavaScript明星开源项目数据的网页。​准备步骤├── css│ └── style.css├── effect.gif├── images├── index.html└── js ├── all-data.json ├── index.js ├── jquery-

为了打发无聊的时间，小蓝开发了一款人机对战的猜硬币游戏，页面中一共有 9 个杯子，系统会随机挑选 3 个杯子在里面放入硬币，玩家通过输入含有杯子序号的字符串进行猜选，但是遇到了一些问题。本题需要你帮助小蓝完成猜硬币游戏。​准备步骤├── css├── effect.gif├── images├── index.html└── js ├── findCoin.js └── index.jscss 是样式文件夹。images 是图片文件夹。index.html 是主页面。

国际标准书号（International Standard Book Number），简称 ISBN ，是专门为识别图书等文献而设计的国际编号。2007 年 1 月 1 日之前，ISBN 由 10 位数字组成，包括四个部分：组号（国家、地区、语言的代号），出版者号，书序号和检验码。2007 年 1 月 1 日起，实行新版 ISBN，新版 ISBN 由 13 位数字组成。新版 ISBN 编码增加了 EAN·UCC 前缀，这是为了与国际条形码编码 EAN·UCC 系统接轨。本题请实现一个ISBN-10。

如果给你若干个数组，你能很快判断出最长的都有哪些吗？本题需要在已提供的基础项目中，使用 JS 知识封装一个函数，该函数可以接收若干个一维数组作为参数，并最终返回长度最大的数组集合。​准备步骤├── index.html└── js └── index.jsjs/index.js 是页面功能实现的逻辑代码。index.html 包含用于检测函数的代码。cd /home/projectwget https://labfile.oss.aliyuncs.com/courses/105

作为一名人工智能训练师，你需要使用数组中提供的指定语料进行训练，你可以用其中的词来组成任何句子来进行智能绘画的训练。​准备步骤├── css├── images├── index.html├── effect.gif└── js └── index.jsindex.html 是主页面。css 是样式文件夹。images 是图片文件夹。js/index.js 是待补充的 js 文件。effect.gif 是项目最终完成的效果图。目标效果imageCount 表

狼人杀”是一款多人参与的策略类桌面游戏。本题我们一起完成一个简易的狼人杀游戏，让我们找到其中的狼人。​准备步骤├── css│ └── style.css├── images│ └── card.svg├── index.html└── js └── myarray.jscss/style.css 是样式文件。index.html 是主页面。images 是图片文件夹。js/myarray.js 是需要补充的 js 文件。cd /home/projectwg

如果给你一个数组，你能很快将它分割成指定长度的若干份吗？本题需要在已提供的基础项目中使用 JS 知识封装一个函数，达到分割数组的要求。​准备步骤├── effect.gif├── index.html└── js └── index.jseffect.gif 是最终实现的效果图。index.html 是主页面。js/index.js 是需要补充代码的 js 文件。cd /home/projectwget https://labfile.oss.aliyuncs.com/c

团队开发中为了解决变量相互覆盖的问题，会将相关的功能的涉及到变量收编到一个对象内。但使用对象收编变量后需要注意this合理使用。​准备步骤├── css│ └── style.css├── index.html└── js └── index.jsindex.html 是主页面。css 是存放项目样式的文件夹。js/index.js 是需要补充代码的 js 文件。cd /home/projectfile="this" && wget "https://labfile.

在网络世界中，突然间失去了所有的连接。作为勇敢的冒险者，你将踏上一段惊险刺激的旅程，穿越充满谜题和挑战的网络景观，与神秘的网络幽灵对抗，解开断网之谜，找回失去的连接，带领人们重返数字世界。准备好迎接这场奇幻之旅吗？​准备步骤├── css├── images├── index.html├── effect.gif└── js └── index.jsindex.html 是主页面。css 是样式文件夹。images 是图片文件夹。effect.gif 是项目最终完成的效果图

在电子商务网站中，用户可以通过鼠标或手势交互实现 360 度全方位查看产品，提升用户体验。现在需要你设计一个Pipeline管道函数，用于控制 360 度展示产品的动画序列，通过管道连接各个动画步骤，使产品以流畅的方式呈现给用户。​准备步骤├── css├── effect.gif├── js│ ├── index.js│ └── utils.js└── index.htmlcss 是样式文件夹。index.html 是主页面。js/index.js 是动画序列代码的 js

为了提高用户体验，网站有时需要多种浏览模式。现在特邀请你为蓝桥官网设计具有经典、浏览和工具三种布局模式。使用户可以根据具体情况选择合适的模式，以便更好地浏览网页内容。本题需要在已提供的基础项目中使用 JS 完善代码实现布局的切换。​准备步骤├── css├── images├── index.html├── effect.gif└── js └── index.jscss 是样式文件夹。images 是图片文件夹。index.html 是主页面。effect.gif 是最终完

在数字时代，信息分享变得日益普遍和重要。无论是个人经历、知识技能还是创意想法，分享已经成为连接人与人之间的桥梁，是促进交流和学习的重要途径。用户可以分享自己的见解、经历、学习和创作，将点滴的智慧和灵感分享给世界。本题需要在已提供的基础项目中使用 JS 知识封装一个函数，完成分享。​准备步骤├── css├── js| └── index.js└── index.htmlcss 是样式文件夹。index.html 是主页面。js/index.js 是待补充代码的 js 文件。目

2022 奥运会满意度调查开始了，冰墩墩作为奥运吉祥物以亲民可爱的形象火遍全球，这次，冰墩墩请你打分，满分 5 分，最低 1 分，快来评分吧！​准备步骤├── css│ └── index.css├── index.html└── js └── index.jsindex.html 是主页面。css 是存放页面样式的文件夹。js/index.js 是需要补充代码的 js 文件。wget https://labfile.oss.aliyuncs.com/courses/1

日常在使用移动端 APP 或访问 PC 端网站的时候，常常发现在一些有工具栏或者 Tab 栏的页面会有顶栏固定的效果。简单来说，在页面未开始滚动时顶栏处在其原有的位置上，当页面向下滚动一定区域后，顶栏会跟随滚动固定在页面上方。本题请实现一个顶栏固定的课程网站首页。

三叔在外出考古途中无意发现了一份战国帛书，帛书边缘有被明显裁剪过的痕迹，单从帛书片段，提到记录了神秘文物的地点，无奈帛书不完整，为了早日将文物带回博物馆，三叔号召当地村民闷油瓶、王胖子、潘子共同寻找剩余帛书碎片，相约一炷香后再聚。本题需要在已提供的基础项目中使用 JS 知识封装一个函数，达到收集帛书碎片的要求。​准备步骤├── js│ └── collect-puzzle.js├── css│ └── style.css├── images└── index.htmlindex

很多网站都会通过给图片添加水印的形式来标记图片来源，维护版权。前端生成水印通常是通过canvas实现，但实际上我们也可以直接利用CSS来实现图片水印，这样做会有更好的浏览器兼容性。本题中你将封装一个创建文字水印的函数。​准备步骤├── css│ └── style.css├── images│ └── origin.png├── index.html└── js ├── dom-to-image.js └── index.jsindex.html 是主页面。c

每年大一新生报道时，都需要办一张校园一卡通，无论吃饭、洗澡、买东西、甚至去图书馆借书都要用，小蓝想帮助学校做一个制卡界面，但是用 js 做用户输入验证不知道怎么写，快来帮助小蓝完成这个页面吧！​准备步骤├── css│ ├── wish.css │ └── index.css├── images │ └── college.jpg └── index.htmlindex.html 是主页面。images 是图片文件夹。css 是样式文件夹。wget https:

双 11、618 是近些年来兴起的购物节，每到这个时候商品的销售数量和销售额都非常巨大。如此庞大的数据通过表格的形式很难观察其增减趋势，图表能更加直观的显示数据的变化。目前，云课后台已经实时统计了 1 小时平台课程的销售数量和销售额，本题需要使用echarts将这些数据用图表的方式显示到前端。​准备步骤├── effect.gif├── css│ └── index.css├── index.html└── js ├── echarts.js └── index.js

现在都提倡健康使用手机，那么统计一下在一周中每天使用手机的情况吧！本题使用 ECharts 实现统计手机使用时长的折线图，但是代码中存在 Bug 需要你去修复。​准备步骤├── js│ └── echarts.js└── index.htmljs/echarts.js 是 ECharts 文件。index.html 是主页面。cd /home/projectwget https://labfile.oss.aliyuncs.com/courses/9791/03.zip && u

除了使用办公软件来制作 PPT，利用前端技术其实我们也可以制作一个在浏览器播放的 PPT，这样的 PPT 更加方便传播和查看，而且可以最大限度地利用前端技术的布局和交互能力。本题请实现一个讲授 HTML 基础知识的网页 PPT。​准备步骤├── css│ └── style.css├── effect.gif├── images│ ├── left-small.svg│ └── right-small.svg├── index.html└── js ├── index

密码生成器是一个实用的随机密码生成软件，有了它，你就不用绞尽脑汁想复杂的密码来守护你的个人隐私，只要动一下手指，一个新的密码就会生成。如此好用的工具，下面就让我们亲自动手来制作一个吧～这段 HTML 代码构建了一个简单的用户界面，用于实现随机密码生成器的交互部分。用户可以通过该界面设置密码的长度和包含的字符类型，然后点击按钮生成密码。这段 CSS 代码为 HTML 页面提供了样式，使页面具有美观的布局和视觉效果。​目标效果生成的密码必须包含已选中的选项且只能由已选中的选项组成。特殊符号如下：!@#$

右键启动 Web Server 服务（Open with Live Server），让项目运行起来。请使用 jQuery 或者 js ，完成。文件中的 TODO 部分。​准备步骤├── css│ └── style.css├── images├── index.html└── js └── jquery.min.jsindex.html 是主页面。js/jquery.min.js 是 jQuery 文件。images 是图片文件夹。css/style.css 是样式文件

随着医疗水平的进步，人的平均寿命在慢慢提升。现在全球平均预期寿命是 73.2 岁，而在 1950 年则只有 47 岁。那么人类的寿命有极限吗？根据最新的研究，人类寿命或超过 120 岁，达到 150 岁。因此，有关年龄的应用普遍将当今人类的合理年龄范围设置在 0 - 150 岁之间。那么，当一个年龄被录入，我们又是如何判断其是否合理的呢？​准备步骤├── age.js└── index.htmlindex.html 是主页面。age.js 是需要补充代码的 js 文件。目标效果如果新属

俗话说“民以食为天”，粮食的收成直接影响着民生问题，通过对农作物产量的统计数据也能分析出诸多实际问题。接下来就让我们使用 ECharts 图表，完成 X 市近五年来的农作物产量的统计图吧～​准备步骤├── data.json├── index.html└── js ├── axios.min.js └── echarts.min.jsindex.html 是主页面。js/echarts.min.js 是 ECharts 文件。js/axios.min.js 是 axios

公司经常举办各种活动，但一到投票环节就犯了难，于是公司决定安排小蓝开发一个投票系统，更好的收集大家的投票信息。为了赶在下一次活动开始前上线，小蓝正在马不停蹄的赶工中，请你也来帮助小蓝完成部分功能吧。​准备步骤├── css├── images├── js│ └── jquery.min.js└── index.htmlindex.html 是主页面。images 是存放图片的文件夹。css 是存放样式文件的文件夹。js/jquery.min.js 是 jQuery 文件。

在阿里巴巴和四十大盗的故事中，阿里巴巴因为无意中知道了开门的咒语人生发生了翻天覆地的变化，四十大盗也因为咒语的泄露最终丧命。芝麻开门的咒语作为重要的信息推动着故事的发展。下面由你来为门设置这道机关，输入芝麻开门后才能放行。​准备步骤 ├── index.css ├── index.html └── index.js目标效果点击“点击弹出对话框，输入咒语”按钮会调用 mPrompt 函数，mPrompt 调用后页面显示对话框。mPrompt 函数必须返回一个 pro

大家在平时浏览网页的时候有没有见过下面这样的效果呢？我们看到，图片的近处是模糊的，而远处是清晰的，我们把这种效果称为景深。CSS 中有一个属性可以支持元素的平移、旋转、缩放或倾斜。同时，CSS 中还有一个属性可以将模糊或颜色偏移等图形效果应用于元素。大家可以试着通过MDN或者其他方式查找哪些 CSS 属性可以满足上述需求。通常，我们会在 CSS 中对需要应用上述效果的元素直接书写相应的属性值。但是，如何根据场景动态修改上述属性值也是日常业务中常见的需求。

在 JavaScript 中，对于时间的处理，往往需要借助于Date对象操作来完成。但是，仅仅使用它来获取时间是无法满足日常业务需求的。例如，有时候我们需要将时间从枯燥的数字转化为更能吸引用户眼球的动态时钟。我们该如何实现呢？在本节挑战中，我们就遇到了类似情况：：上图中的动态时钟效果，是通过 HTML 和 CSS 结合 JS 中的 Date 对象来实现的。本节挑战的代码中，还未实现秒针转动的效果。希望你能观察代码的特点，让秒针转起来。

实际工作中随机数的使用特别多，比如随机抽奖、随机翻牌。通过随机数还能实现很多有趣的效果，比如随机改变元素的位置或颜色。本题需要在已提供的基础项目中使用JS知识封装一个函数，该函数可以根据需要，生成指定范围和个数的不重复的随机数数组。

小兔子想去月球上旅行，假设小兔子拥有一个n阶梯子，当你爬完n层就可以到达月球，小兔子每次可以跳1或者2个台阶，小兔子有多少种跳法可以到达月球呢？给定n是一个正整数，代表梯子的阶数，当n=2时，小兔子有2种跳法到达月球；

各个网站都拥有登录页面，设计一个界面美观的登录页面，会给用户带来视觉上的享受。本次试题我们要完成一个登录页面的布局。​准备步骤wget https://labfile.oss.aliyuncs.com/courses/7835/exam01-imi.zip && unzip exam01-imi.zip && mv exam01-imi/* ./ && rm -rf exam01-imi*├── css│ └── style.css├── images│ ├── backgroun

新年马上到了，大家肯定有很多祝福的话语要对自己的亲人朋友说，下面我们一起来制作一张贺卡，让我们把想说的话都写在贺卡上。​本题已经内置了初始代码，打开实验环境，目录结构如下：wget https://labfile.oss.aliyuncs.com/courses/7835/fruit-flex.zip&& unzip fruit-flex.zip && rm fruit-flex.zip下载完成之后的目录结构如下：├── index.css├── index.html└── index.j

目前 CSS3 中新增的 Flex 弹性布局已经成为前端页面布局的首选方式，这次试题将利用 Flex 实现经典布局效果。

很多人都有自己的博客，在博客上面用自己的方式去书写文章，用来记录生活，分享技术等。下面是蓝桥云课的博客，但是上面还缺少一些样式，需要大家去完善。

选项卡功能在前端开发中特别常见，作为设置选项的模块，每个选项卡代表一个活动的区域，点击不同的区域，即可展现不同的内容，这样既能节约页面的空间又能提升页面性能。本题需要在已提供的基础项目中使用 JS 完成选项卡功能的编码，最终实现切换选项卡可以显示对应内容的效果。

营销号，有时候需要一些特定的欢迎语，但针对特定的用户，我们希望可以个性化一点。本题需要在项目文件中修改代码存在的问题，实现根据模版生成特定用户的欢迎语。

本次挑战需要实现图片折叠的效果，请使用 jQuery 语法完成代码。HTML 负责页面结构，CSS 负责页面样式和布局，JavaScript 负责处理用户点击事件，三者协同工作，实现了一个带有响应式功能的折叠手风琴效果。初始状态：HTML 部分创建了多个选项元素，部分元素添加了active类。CSS 部分为元素设置了基本样式，包括布局、背景、阴影和过渡效果。具有active类的元素使用flex-grow占据更多空间，其他元素占据较少空间。页面通过 Flex 布局和媒体查询实现了基本的布局和

超文本标记语言（HyperText Markup Language，简称 HTML）是构建网页结构的基础标记语言。它与 CSS、JavaScript 协同，负责搭建网页“骨架”，用标签组织内容，像标题、段落、图片等元素，通过起始与结束标签（部分可单用，如``）界定层级与布局，将信息有序整合。标签含特定语义，向浏览器传达展示方式，为网页准确呈现及后续美化、交互筑牢根基。