江月迟迟

每日一题：JSON 生成器介绍JSON 已经是大家必须掌握的知识点，JSON 数据格式为前后端通信带来了很大的便利。在开发中，前端开发工程师可以借助于 JSON 生成器快速构建一个 JSON 用来模拟数据。 本题请你开发一个简易的 JSON 生成器工具，使它能根据模板生成对应格式的 JSON 。 准备开始答题前，需要先打开本题的项目代码文件夹，目录结构如下： 12345├── css├── index.html└── js ├── highlight.min.js └── index.js 其中： css 是样式文件夹。 index.html 是主页面。 js/highlight.min.js 是 json 格式化文件。 js/index.js 是需要补充代码的 js 文件。 注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载： 12cd /home/projectwget https://labfile.oss.aliyuncs.com/courses/9788/09.zip && unzip 09.zip && rm 09. ...

不能说的秘密介绍密码生成器是一个实用的随机密码生成软件，有了它，你就不用绞尽脑汁想复杂的密码来守护你的个人隐私，只要动一下手指，一个新的密码就会生成。 如此好用的工具，下面就让我们亲自动手来制作一个吧～ 准备本题已经内置了初始代码，打开实验环境，目录结构如下： 12345├── css│ └── style.css├── index.html└── js └── generatePassword.js 其中： css/style.css 是样式文件。 index.html 是主页面。 js/generatePassword.js 是需要补充代码的 js 文件。 选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。 接着，打开环境右侧的【Web 服务】，就可以在浏览器中看到如下效果： 目标请完善 generatePassword.js 中的 generatePassword 函数，实现根据规则随机生成密码的功能。密码长度已由 input 框（id=passwordLength）的属性进行了限制最小 ...

每日一题：商城管理系统介绍在商城管理系统中，超级管理员和普通管理员因为权限不同，登录进入后看到的菜单也会是不同的。 本题需要你完成商城管理系统中权限数据的处理。 准备开始答题前，需要先打开本题的项目代码文件夹，目录结构如下： 12345678├── css├── images├── js│ ├── auth.js│ └── menu.js├── effect.gif├── login.html└── index.html 其中： css 是样式文件夹。 images 是图片文件夹。 login.html 是登录页。 index.html 是商城首页。 js/menu.js 是渲染左侧菜单的 js 文件。 js/auth.js 是需要补充代码的 js 文件。 effect.gif 是最终完成的效果图。 注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载： 12cd /home/projectwget https://labfile.oss.aliyuncs.com/courses/9788/10.zip && unzip 10.zip &&a ...

每日一题：迷惑的 this介绍团队开发中为了解决变量相互覆盖的问题，会将相关的功能的涉及到变量收编到一个对象内。但使用对象收编变量后需要注意 this 合理使用。 准备本题已经内置了初始代码，打开实验环境，目录结构如下： 12345├── css│ └── style.css├── index.html└── js └── index.js 其中: index.html 是主页面。 css 是存放项目样式的文件夹。 js/index.js 是需要补充代码的 js 文件。 注意：打开环境后发现缺少项目代码，请复制下述命令至命令行进行下载。 12cd /home/projectfile="this" && wget "https://labfile.oss.aliyuncs.com/courses/19791/${file}.zip" && unzip "${file}.zip" && rm "${file&# ...

每日一题：一起会议吧介绍网络会议已经成为当下最流行的会议模式，为网络会议提供支持的当然是一些优秀的会议软件。 本题需要在已提供的基础项目中使用 Vue 2.x 知识完善代码，最终实现网络会议软件中，参会人员列表的几个展示效果。 准备开始答题前，需要先打开本题的项目代码文件夹，目录结构如下： 12345678├── effect.gif├── index.html├── css├── images└── js ├── axios.min.js ├── userList.json └── vue.js 其中： effect.gif 是最终实现的效果图。 index.html 是主页面。 css 是样式文件夹。 images 是图片文件夹。 js/axios.min.js 是 axios 文件。 js/userList.json 是需要请求的数据文件。 js/vue.js 是 Vue 2.x 文件。 注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载： 12cd /home/projectwget https://labfile.oss.aliyuncs.co ...

每日一题：贪吃蛇介绍贪吃蛇作为一款经典休闲益智类游戏，通过控制蛇头方向吃蛋，从而使得蛇变得越来越长。在 90 年代拥有一部可以玩贪吃蛇的手机可以玩上一整天，如今可玩的游戏越来越多，但是当时玩一天的快乐再也找不回了。 准备本题已经内置了初始代码，打开实验环境，目录结构如下： 1234├── css├── index.html└── js └── index.js 其中: css 是存放项目样式的文件夹。 index.html 是主页面。 js/index.js 是需要补充代码的 js 文件。 注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载： 12cd /home/projectfile="snake" && wget "https://labfile.oss.aliyuncs.com/courses/19791/${file}.zip" && unzip "${file}.zip" && rm "${ ...

每日一题：相不相等介绍小蓝想要自己开发一套用于 JS 单元测试的基础 API，先从编写一个用于检验两个数据值是否相等的函数开始吧，但是此时的小蓝却犯了难，聪明的你快来帮帮他吧～ 准备开始答题前，需要先打开本题的项目代码文件夹，目录结构如下： 1└── index.js 其中： index.js 是需要补充代码的 js 文件。 目标请你编写一个名为 expectFn 的函数，用于帮助开发人员测试他们的代码。它可以通过参数 val 接受任何值，并返回一个对象，该对象包含下面两个函数： toBe(val)：接受另一个值并在两个值相等（ === ）时返回 true 。如果它们不相等，则返回 “Not Equal” 。 notToBe(val)：接受另一个值并在两个值不相等（ !== ）时返回 true 。如果它们相等，则返回 “Equal” 。 示例如下： 12345678910111213141516171819// 示例 1：输入：console.log(expectFn(5).toBe(5))输出：true解释：5 === 5 因此该表达式返回 true。// 示例 2：输入：c ...

每日一题：阅读吧介绍“读万卷书，行万里路”，无论你现在贫穷或富有，身和心一定要有一个在路上。那么，在快节奏的今天，人们是如何利用碎片化的时间去阅读的呢？没错，那就是电子书了。有了它，我们就可以随时随地，想读就读～ 本题需要在已提供的基础项目中使用 Vue 2.x 完善代码，最终实现一个简易的电子书阅读器。 准备开始答题前，需要先打开本题的项目文件夹，目录结构如下： 12345├── effect.gif├── index.html├── css└── js └── vue.js 其中： effect.gif 是最终实现的效果图。 index.html 是主页面。 css 是样式文件夹。 js/vue.js 是 Vue 2.x 文件。 注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载： 12cd /home/projectwget https://labfile.oss.aliyuncs.com/courses/9790/07.zip && unzip 07.zip && rm 07.zip 在浏览器中预览 index.html 页面 ...

每日一题：虚拟滚动列表介绍虚拟列表其实是按需显示的一种实现，即只对可见区域进行渲染，对非可见区域中的数据不渲染或部分渲染的技术，从而达到极高的渲染性能。 比较适用于数目较多但体量不大的数据渲染应用场景，后端接口可一次性返回条数较多的数据，避免向服务器频繁地发送 http 请求去多次获取，比如新闻标题列表f。 假设接口一次性返回了 1 万条记录，我们屏幕的可见区域的高度为 500px，而列表项的高度为 50px，则此时我们在屏幕中最多只能看到 10 个列表项，在不考虑分页的情况下，如果我们一次性渲染 1 万个 DOM 节点，性能开销会非常大。 如果在首次渲染的时候，我们只需加载 10 条，渲染就会变得非常快： 并且当滚动发生时，我们可以通过计算当前滚动值得知此时在屏幕可见区域应该显示的列表项 假设滚动发生，滚动条距顶部的位置为 150px，则我们可通过计算得知在可见区域内的列表项为 第 4 项至第 13 项： 虚拟列表的实现，实际上就是在首屏加载的时候，只加载可视区域内需要的列表项，当滚动发生时，通过动态计算获得可视区域内的列表项，并将非可视区域内已存在的列表项删除： 计算当前可视 ...

每日一题：新增地址介绍网购大家应该再熟悉不过，网购中有个很难让人忽略的功能就是地址管理，接下来就让我们通过完善代码来探索下地址管理中常用功能的实现吧～ 本题需要在已提供的基础项目中使用 JS 知识完善代码，最终实现需求中的具体功能。 准备开始答题前，需要先打开本题的项目代码文件夹，目录结构如下： 1234567├── effect.gif├── index.html├── css├── images└── js ├── data.js └── index.js 其中： effect.gif 是最终实现的效果图。 index.html 是主页面。 css 是样式文件夹。 images 是图片文件夹。 js/data.js 是省市区列表数据。 js/index.js 是需要补充代码的 js 文件。 注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载： 12cd /home/projectwget https://labfile.oss.aliyuncs.com/courses/9790/08.zip && unzip 08.zip &&am ...