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/jQuery 等知识完善代码，最终实现该功能。​准备步骤├── effect.gif├── index.html├── css├── images└── js ├── index.js └── jquery-

如果给你一个数组，你能很快将它分割成指定长度的若干份吗？本题需要在已提供的基础项目中使用 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

三叔在外出考古途中无意发现了一份战国帛书，帛书边缘有被明显裁剪过的痕迹，单从帛书片段，提到记录了神秘文物的地点，无奈帛书不完整，为了早日将文物带回博物馆，三叔号召当地村民闷油瓶、王胖子、潘子共同寻找剩余帛书碎片，相约一炷香后再聚。本题需要在已提供的基础项目中使用 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

在线购物几乎已经是现代生活必备的一环，每年的 618，双 11 都是购物的狂欢。我们几乎可以在线上购物商城买到一切日常所需。本题需要在已提供的基础项目中，使用 Web 原生拖拽事件实现在线购物的功能。​准备步骤├── images│ ├── book.jpeg│ ├── box.jpeg│ ├── paper.jpeg│ ├── trolley.jpeg│ └── tv.jpg├── index.html├── effect.gif├── js│ ├── ht

我们知道在浏览器中 JavaScript 是单线程运行的，而回调函数曾经是 JavaScript 中实现异步函数的主要方式，面对这样的嵌套回调，处理错误也会变得非常困难：你必须在“金字塔”的每一级处理错误，而不是在最高一级一次完成错误处理，所以大多数现代异步 API 采用的都是 Promise 的形式。下面就请你以 Node.js 中常用的读取文件操作为例，封装一个 Promisefy 函数，将回调形式调用的读取文件方法转换成一个 Promise 的版本。

小蓝开发了一个登录功能，但是在登录界面中输入用户名后点击“确认”按钮并没有如预期般成功进入欢迎界面。但是从出现欢迎语来看，数据已经发生了改变，到底是怎么回事呢？请帮助小蓝排查代码，让登录功能回归正常吧！1. 页面初始化Vuex 存储初始化：代码中定义了 BaseModule 和 UserModule 两个 Vuex 模块，并创建了一个 Vuex 存储实例 store。BaseModule 存储了欢迎信息，初始状态下 welcome 的值为 '请输入用户名登录系统'。UserModule 存储了用户相

小蓝发现人之间面对面交流逐渐减少，倾诉的机会变少了，有些人比较腼腆保守，不敢大声说出自己的心里话，期盼之类的，容易造成压力过大，心愿便利贴可以匿名，提供大家安全隐秘方便的倾诉平台。小蓝希望大家写下自己的目标、理想、愿望等，激励自己奋斗，积极向上......写出来做一个精神寄托。可是，小蓝对 Vue 语法不熟，便利贴没能完成，快来帮助小蓝完成吧！​准备步骤├── css│ ├── fonts│ │ ├── element-icons.ttf│ │ └── element-ico

每年大一新生报道时，都需要办一张校园一卡通，无论吃饭、洗澡、买东西、甚至去图书馆借书都要用，小蓝想帮助学校做一个制卡界面，但是用 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 页面提供了样式，使页面具有美观的布局和视觉效果。​目标效果生成的密码必须包含已选中的选项且只能由已选中的选项组成。特殊符号如下：!@#$

六大派围攻光明顶，为解除明教危机，张无忌临危受命，在小昭的帮助下进入明教圣地拿到乾坤大挪移心法。在这关键时刻，心法因没有妥善保存长久暴露在空气中，部分字体已不可见，下面需要由你来设计心法帮助张无忌习得神功，战胜六大门派。​准备步骤目标效果mentalMethod 需要返回一个函数，可以一直进行调用，但是最后一次调用不传参。函数通过以下方式执行，返回结果均为 '战胜峨眉,武当,少林'。mentalMethod('峨眉')('武当')('少林')();mentalMethod('峨眉','武当'

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

我们的国家国土面积十分的广阔，目前中国有 34 个省级行政区，包括 23 个省、5 个自治区、4 个直辖市、2 个特别行政区。其下面还有几千个县级区域，以及更多的乡镇区域。这样层层嵌套的省市区数据在实际开发中是如何处理的呢？下面请运用所学，解开这个谜团吧～​准备步骤├── convert-to-tree.js└── index.htmlindex.html 是主页面。convert-to-tree.js 是需要补充代码的 js 文件。目标效果[ { id: "51", //

俗话说“民以食为天”，粮食的收成直接影响着民生问题，通过对农作物产量的统计数据也能分析出诸多实际问题。接下来就让我们使用 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

期末考试结束不久，辛勤的园丁们就将所有学生的考试成绩汇总完毕。不过现在遇到一个问题，那就是目前所有学生的考试数据均混杂在一起。name: "潇然",class: 2, // 班级math: 110, // 数学成绩language: 92, // 语文成绩english: 114, // 英语成绩physics: 56, // 物理成绩chemistry: 74, // 化学成绩},name: "张三",class: 1,math: 100,},// ...

登录、发短信等按钮避免用户点击太快，以致于发送了多次请求。调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多。文本编辑器实时保存。上面这些场景在实际交互中会不断地调用绑定在事件（如：浏览器的resizescrollkeypressmousemove等）上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，需要对这类事件进行调用次数的限制，对此我们就可以采用防抖（debounce）的方式来减少调用频率。

歌者文明的二向箔目前已经到达太阳系，二向箔的封装力场已经消失，接触到太阳系的三维空间后，导致三维立体空间塌陷，变成二维平面空间并不断扩展。倘若能借助曲率引擎等手段以光速先行逃离，那么摆脱二维化的命运依然是可能的。目前人类已经开发出曲率飞船，停放飞船的港口一次性只能发送 10 辆飞船，并且飞船的启动时间为 3000ms。下面由你来开发一个类收集飞船的发射请求，依据飞船的结果自动安排下一批次的飞船发射，帮助人类逃离二向箔的打击。但是由于发射飞船的装置限制，一次最多发送的飞船有数量限制。

小蓝最近一直在云课平台学习，为了更好的督促自己，于是将每天的学习时间都记录了下来，但是如何更加直观的显示学习时间让小蓝很是苦恼。本题需要你使用 ECharts 帮助小蓝实现统计学习时间图表。

小楼的爸爸是一名程序员，暑假期间，发现小楼在家经常玩手机，于是决定设计一个小游戏让小楼学习成语来加强小楼对成语的理解。接下来让我们跟着小楼来学学成语吧~​准备步骤├── index.html└── js └── vue.min.js目标效果idiom=["","","",""]，点击热字，则idiom=["热","","",""]idiom=["热","","","眶"]，点击泪字，则idiom=["热","泪","","眶"]idiom=["热","泪"

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

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