2024年蓝桥杯Web开发【大学组：模拟题一】15届_15界web蓝桥杯

1.动态的Tab栏

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

1.1 题目要求

请在 style.css 文件中补全代码。

1. 当用户向下滚动的高度没有超过标题栏（即 .heading 元素）的高度时，保持 Tab 栏在其原有的位置。当滚动高度超过标题栏的高度时，固定显示 Tab 栏在网页顶部。

完成后效果如下

1.2 题目分析

第一题比较简单，就是让我们在style.css中添加代码实现定位的效果，想到定位我们脑子里应该想到的是：position，没错就是用它，如果你忘记了它有哪些用法，请看下面的表格:

当我们知道各个属性的作用后，在根据题目需要达到的效果，很明显这里要使用的是：sticky

1.3 源代码

  /* TODO: 请在此补充代码实现tab栏动态固定 */
  position: sticky;
  top: 0;
1
2
3

2.地球环游

“地球漫游”：一款基于 CSS 动画的小型网页应用，让您身临其境地感受地球绕着太阳公转的奇妙旅程。通过这个应用，您可以观察地球绕着太阳的运动轨迹和速度，感受到宇宙的浩瀚和神秘。

2.1 题目要求

找到 css/style.css 文件中的 TODO 部分，完成以下目标：

给 .earth-con 元素添加动画，设置如下:

• 动画名称: orbit
• 动画时间: 36.5 秒
• 速度函数:线性
• 播放方式:无限循环

完成后效果如下：

2.2 题目分析

这一题只要你知道css动画的使用方法，简直就是送分，所有动画的要求都已经给你了，而且还标注出来了动画的名称，直接在对应的css部分添加动画代码即可。

2.3 源代码

/* TODO:待补充代码，添加动画 */
    animation: orbit 36.5s linear infinite;
1
2

3.迷惑的this

团队开发中为了解决变量相互覆盖的问题，会将相关的功能的涉及到变量收编到一个对象内。但使用对象收编变量后需要注意 this 合理使用。

3.1 题目要求

完善 js/index.js 中的 handle 函数中的 TODO 部分，实现以下功能:

1. 为输入框（即 this.inputEl）绑定 input 事件，当输入框的值发生变化时，调用已经提供的 handleInput 方法进行搜索处理，注意 handleInput 方法调用时的 this 指向应为 search 对象本身。

完成后效果如下：

3.2 题目分析

根据题目的名称可以看出来这一题应该是与this相关的问题，js文件中需要用到的dom元素和函数都已经给我们写好了，只需要我们给input绑定一个input事件，我们相当然的就会写出这样的代码：

handle() {
    // TODO：待补充代码
    this.inputEl.addEventListener('input', this.handleInput)
  },
1
2
3
4

但是运行发现不对，达不到效果，错误的原因就是忽略了this的指向问题，当你使用addEventListener将一个函数作为事件处理程序附加到元素时，该函数会失去其原始上下文，函数内部的this将指向触发事件的元素。我们可以打印此时的this看看：

可以看到此时的this指向已经变成了input这个dom元素了，他的身上并没有hanleInput()这个方法，此时我们就要使用bind来修改this的指向。在面向对象中bind是很重要的，关乎到整个class对象的this问题。

3.3 源代码

handle() {
    // TODO：待补充代码
    //使用bind来纠正 this的指向
    this.inputEl.addEventListener('input', this.handleInput.bind(this))
  },
1
2
3
4
5

4.魔法失灵了

oh ~ 糟糕