蓝桥杯
文章平均质量分 76
明天一定早睡_
这个作者很懒,什么都没留下…
展开
-
蓝桥杯前端Web赛道-输入搜索联想
在控制台上直接输入代码,会有非常清楚的提示,下面是动画演示,其实其他的函数也可以靠这个方法来试出它的用法,但是前提是你知道过这个函数怎么用,这只是起到一个让记忆回笼的作用。呢,其实这是题目的一个要求之一,因为题目要求的模糊查询是无视大小写的,所以我们可以“曲线救国”,干脆在进行判断的时候,就把当前需要进行查询的字段。内部也可以做计算,我们可以直接在原地添加即可,上面的动画已经演示过如何使用技巧取出我们需要的值,这里就不过多赘述。思路如下,将原先单词的第一个字母变成大写字母,然后把剩下的字母都拼接在一起。原创 2024-03-14 17:51:02 · 2107 阅读 · 0 评论 -
蓝桥杯前端Web赛道-水果消消乐
至此完成题目所有要求,由于题目没有要求效果必须要和实例一样,所以我并没有留显示水果的时间,所以点击第二个水果的时候会出现看不到它的情况,代码直接就往下走继续判断了,实际上代码也是可以通过的,如果想要达到题目的效果,使用。这里我们先判断数组内的元素是否已经有两个元素,这样我们才能继续对比然后对比这俩元素是否为相同的水果,如果是,我们就把当前元素的父元素透明度设置为0。现在就剩下计分的需求了,由于每次判断后,分数就应该相应的发生变化,所以我们将分数的改变放到我们刚刚的判断里然后再渲染上去。原创 2024-03-14 17:16:04 · 1089 阅读 · 0 评论 -
蓝桥杯前端Web赛道-收集帛书碎片
是 ES6 中的语法,用于将 Set 对象转换为数组。Set 对象是一种集合数据结构,其中的元素是唯一的,不会重复。是调用一个数组方法,用于将多维数组(嵌套数组)转换为一维数组。其实通过这个目标我们可以看出其实就是筛选出数组中多余的元素,那么我们可以通过。来判断,当前数组是否已经拥有过这个碎片,如果没有拥有过就。通过控制台打印出现在的数据是这个样子的,是一个二维数组。操作符,可以将 Set 对象中的元素转换为数组形式。方法,可以将其内部的所有元素平铺到一个新数组中。是一个二维数组,通过调用。原创 2024-03-06 10:40:13 · 547 阅读 · 0 评论 -
蓝桥杯前端Web赛道-新鲜的蔬菜
此时相当于只实现了垂直居中,我们还需要做到水平居中,才能让盒子中的白菜整齐的摆放在中间,这个时候就需要用到。第二个盒子里有两个元素,根据需求我们确定只需要把第二个辣椒移动到右下角即可,控制一个元素的位置我们可以使用。属性,该属性可以让盒子内的元素两端对齐,项目之间的间隔都相等。第三个盒子的样式可以直接依照上面的给出的属性和思路依葫芦画瓢,下面直接给出完整代码。是要设定在你需要控制的那个元素的样式里,而不是写在父盒子中。布局的使用到的各种属性有非常详细的解释。,也就是控制的纵向的排布,反之亦然。原创 2024-03-04 15:31:21 · 1088 阅读 · 1 评论 -
蓝桥杯前端Web赛道-自适应页面
这个时候我们通过观察页面可以发现,紧邻着按钮的下面有个单选框,当我们在控制台点击按钮的时候,会发现单选框也会被选上,所以通过这个特性我们可以使用在css中使用单选框。浮在内容之上,简而言之就是需要让它脱离标准流,也就是使用定位和浮动来做,不使用浮动的原因是浮动需要标明是左浮动还是右浮动,这里我们的菜单不需要。媒体查询通俗易懂的来说就是可以针对不同的屏幕尺寸设置不同的样式,非常符合当前题目的要求。第一组是完成菜单浮动的功能,第二组是完成二级菜单竖向排列的功能,之所以不用子绝父相是因为。原创 2024-02-28 11:32:09 · 2094 阅读 · 0 评论 -
蓝桥杯前端Web赛道-课程列表
第二步的思路如下:当点击第一页的时候,我们就只渲染第一页应该出现的数据量,点击第二页的时候再出现第二页应该出现的数据量,所以。点击按钮进行跳转并且页码为第一页的时候禁用上一页的按钮,页码为第二页的时候禁用下一页的按钮。的基础上+1,这样循环就只会遍历一次,从而将最后一条数据遍历出来,否则则在此基础上加上4。这个函数在点击上一页和下一页的时候是会被反复调用的,我们只需要确定从第几个数据开始遍历。根据要求可以轻易的得出,当页数为第一页的时候,上一页的按钮就应该添加。第二页的数据对应的是数组下标5到第9条数据。原创 2024-02-27 16:11:33 · 958 阅读 · 0 评论 -
蓝桥杯前端Web赛道-寻找小狼人
其实通过题目要求以及题目中提供的gif可知,该题就是需要我们手动写出能够代替。就是这个新数组应该满足的条件,我们可以通过这个回调函数的特性来进行过滤。函数返回的是一个新数组,所以我们还需要在内部定义一个新数组。的括号里提供的是一个回调函数,这个回调函数会返回。则证明当前元素满足要求,将当前元素添加到结果数组。然后我们利用回调函数进行判断,最后返回新的数组。然后再通过一些逻辑,真正完成过滤的要求。以上代码就是条件,满足这个条件就会返回。根据提供的代码对比,我们就能知道。这个数组,于是此时的。原创 2024-02-26 19:01:40 · 485 阅读 · 0 评论 -
蓝桥杯前端Web赛道-展开你的扇子&&和手机相处的时光
在做题的时候我使用的,虽然能完成要求但是不给我过,所以还是使用上面的代码比较好。特别需要注意的是题目要求是鼠标放上去的时候变化,所以需要加上。的这个盒子包含了所有元素,为了让它们都展开,所以必须。这两道题都很简单所以写在一起,先看展开你的扇子。都需要更改角度,按照要求使用下面的代码即可。其实我们和题目比较观察可以发现两点。其实就是在鼠标放上去的时候,每个。现在我们来看和手机相处的时光。所以我们只需要交换x,y轴的。我直接放完整代码在下面。原创 2024-02-16 21:37:07 · 508 阅读 · 0 评论 -
蓝桥杯前端Web赛道-水果拼盘
布局的特殊性,当空间不够的时候,它就会自动缩小空间里的盒子,让它们弹性的变化,在不改变盒子占用空间的比例的情况下来适应现在的空间。我们通过观察题目发现现在的水果都是横向排列的,所以我们需要把水果竖着排,于是我们可以这样写。另外推荐大家去看阮一峰老师编写的关于flex布局的教程,非常详细。刚刚的代码实际上是改变了整个页面的主轴,默认的主轴是。所以最后一步,我们只需要设置换行则可以达到题目要求。也就是说按行来排的,简单用图片表示就是这样。布局,所以我们在提示的位置先写上。布局里,默认是不换行的,由于。原创 2024-02-16 21:07:50 · 454 阅读 · 0 评论 -
蓝桥杯前端Web赛道-卡片化标签
虽然我们成功添加了类名,我们还需要删除之前已经添加的内容,不然只要是点过的地方都会被加上类名。那么,首要工作就是我们需要获取到选项和内容,方便我们添加类名,由于题目要求页面布局部分不能做任何修改操作,所以我们不能使用。这个类名的内容,就是当前选择的内容,所以我们只需要在选项这个地方添加监听事件,当点击改选项的时候,对应的内容也添加。运行题目,通过观察我们可以发现,其实这道题就是一个类名的切换,拥有。这两行代码的意思是,当监听到鼠标点击事件的时候,给当前的选项添加。, 但不同的是,我们需要判断当前。原创 2024-02-15 16:46:33 · 492 阅读 · 1 评论 -
蓝桥杯前端Web赛道-新年贺卡
这个函数可获取小于x,且与x最相近的整数,换言之就是会返回当前数的整数位,所以我们需要把这两个函数结合起来一起使用。根据题目提供的数组得知,我们需要生成十以内的数字,所以我们可以写成。首先我们根据提示得出,这是一个生成随机数的题目,通过生成的随机数,相对应的渲染到页面上。: 将上一步得到的随机整数对数组长度取模,得到一个 0 到。时会发现,这个函数生成的随机数实际上并不都是整数,而是。: 使用上一步得到的随机整数作为索引,从数组。的长度,这样生成的随机数的范围就在。得出的结果即为我们需要的随机数范围。原创 2024-02-15 16:16:04 · 375 阅读 · 1 评论 -
蓝桥杯前端Web-电影院排座位
的右边距,由于空间不够,再加上每个椅子都有10px的外边距,所以就只能把其他盒子挤下去。会出现以下情况,那么为什么会出现这种情况呢,原因是我们前面给。布局,椅子数量太多,并且有规律的拜访,所以挨个移动不现实。效果如下,我们发现座位并没有位于屏幕的中间,所以再在。现在座椅宽度正常了但是都在一行上,所以我们需要使用。变成这样的原因是因为,包裹的宽度有限,由于使用了。这次居中了,我们再来解决每个椅子间隔的问题。布局所以椅子会自动的缩小自己的宽度。的上边距,所以我们最后还要减去。的上边距,所以我们最后还要减去。原创 2023-12-04 13:19:36 · 2145 阅读 · 0 评论