蓝桥杯练习题

<1>搜一搜呀------filter

目标

请完善 index.html 文件，让页面具有如下所示的效果：

题解

  computed: {
          filteredList() {
            // TODO: 请补充代码
           return this.postList.filter(post=>{
              return post.title.match(this.search)
            })
          },
        },

过滤器filter

定义和用法

filter用于对数组进行过滤。

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

语法

array.filter(function(currentValue,index,arr), thisValue)

实例1. 对数组进行过滤，筛选出年龄大于 18岁的数据

const arr = [
	{
        name: 'tom1',
        age: 23
    },
    {
        name: 'tom2',
        age: 42
    },
    {
        name: 'tom3',
        age: 17
    },
    {
        name: 'tom4',
        age: 13
    },
]
const res = arr.filter(item => item.age > 18);
console.log(res);  //[{name: 'tom1',age: 23},{name: 'tom2',age: 42}]
console.log(arr);

(2)关于你的欢迎语

目标

请修复 index.js 文件中存在的 bug，修复完成后，在表单的对应输入框中输入以下内容：

页面效果如下所示：

 result = `欢迎用户${subject.value}在${event2.value}学习${event1.value}课程！`;
    document.getElementById("result").value = result;

(3)卡片化标签页------排他思想

目标

请在 index.js 文件中根据现有 DOM 结构（页面布局部分不能做任何修改操作）实现选项卡动态切换功能。

页面效果如下所示：

题解

// 实现选项卡功能
function init() {
  // TODO 待补充代码
  let tabs=document.querySelectorAll('.tabs div')
  let contents=document.querySelectorAll('#content div')
  console.log(contents);
  for(let i=0;i<tabs.length;i++){
    tabs[i].addEventListener('click',function(){
      for(let j=0;j<tabs.length;j++){
        tabs[j].classList.remove('active')
        contents[j].classList.remove('active')
      }
      tabs[i].classList.add('active')
      contents[i].classList.add('active')
    })
  }
}
init();

（4）水果摆盘

考试要求

提示

align-self 值 ：
  flex-start flex-end center baseline stretch

order:<整数>(... -1, 0 (default), 1, ..)

在需要修改部分的代码有相关提示，请仔细阅读之后，使用 flex 布局中的 align-self 和 order 完善 index.css 中的代码， 把对应的水果放在对应的盘子里面，最终效果如下

题解

/* 菠萝 TODO 待补充代码 */
.yellow {
	align-self: flex-end;
	order: 1;
}

（5）新年贺卡------生成随机数

目标

请仔细阅读需要完善代码部分的提示，之后完善 index.js 样式文件中的 TODO 部分，点击书写贺卡，卡片随机展示已经写好的祝福语：

题解

// 随机数函数 从 greetings 随机取一个值并返回
function writeGreeting() {
	// TODO 带补充代码  
	let ran = Math.floor(Math.random()*5);
    console.log(ran);

	return greetings[ran]
}

/*
 * @param {*} greetingDisplay  要显示内容的dom元素
 */
//  show 将 writeGreeting 函数中返回的内容显示在 greetingDisplay 元素中
function show(greetingDisplay) {
	// TODO 待补充代码
	// greetingDisplay.innerHTML=greetings
	greetingDisplay.innerText = writeGreeting();
}

（6）让时钟转起来

测试效果

可通过如下步骤测试效果：

1. 右键 01/index.html，选择 Open with Live Server。
2. 点击右侧的 Web 服务。

具体操作参考下图：

上述操作会在浏览器中打开新的标签页，如下图所示，请点击 01 文件夹：

之后，你将看到如下效果：

请根据下述挑战要求，通过修改 01/index.js 文件，达到让秒针转动起来的效果。

挑战需求

1. 秒针的旋转方向应为顺时针。
2. 秒针每次旋转的角度为 6deg，且需与当前时间对应。
3. 切勿改动源代码中已写好的部分。

题解

oHoure.style.transform="rotate("+ (nowHoure * 30+houreDeg) + "deg)";
    oMinute.style.transform="rotate("+ (nowMinute * 6+ minuteDeg) + "deg)";
    // 请勿删除上方代码
    // 请在下方补充代码，使得时钟的秒针可以转动起来
    oSecond.style.transform="rotate("+ (nowSecond * 6+ minuteDeg) + "deg)";

（7）由文本溢出引发的"不友好体验"

测试效果

可通过如下步骤测试效果：

1. 右键 03/index.html，选择 Open with Live Server。
2. 点击右侧的 Web 服务。

具体操作参考下图：

上述操作会在浏览器中打开新的标签页，如下图所示，请点击 03 文件夹：

之后，你将看到如下效果：

请通过下述挑战要求，修改 03/index.html 文件，解决文本溢出的问题，最终达到如下效果：

挑战需求

请打开 03/index.html 文件，该文件中有一段代码需要你补充，用以处理文本超出溢出的情况。

1. 本节挑战需使用 CSS3 的处理方式解决该问题，其他方式无效。
2. 要求溢出 2 行时进行处理。
3. 切勿改动源代码中已写好的部分。

题解

overflow:hidden;超出部分省略

text-overflow:ellipsis;省略号

-webkit-line-clamp:2;限制为两行

// 请在下方补充代码，使得文本溢出 2 行时使用省略号
        let item=document.querySelector('.more2_info_name')
        item.style='overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;';
        // item.style.textOverflow='ellipsis'
        console.log(item);

（8）展开你的扇子

目标

请完善 css/style.css 文件（请勿修改文件夹中已给出的代码，以免造成判题无法通过）。

当鼠标悬浮在元素上，元素呈扇形展开，页面效果如下所示：

完成后的效果见文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。

具体说明如下：

• 页面上有 12 个相同大小的 div 元素。
• 这 12 个 div 元素具有不同的背景颜色。
• 前 6 个 div 元素（id="item1"~id="item6"）均为逆时针 转动，其最小 转动的角度为 10 deg，相邻元素间的角度差为 10 deg。
• 后 6 个 div 元素（id="item7"~id="item12"）均为顺时针 转动，其最小 转动的角度为 10 deg，相邻元素间的角度差为 10 deg。
• 注意，元素 6（id="item6"）和元素 7（id="item7"），各自反方向转动 10 deg，所以它们之间的角度差为 20 deg。

题解

：hover放在元素后面，且没有空格

/*TODO：请补充 CSS 代码*/
#box:hover :nth-child(1){
  transform: rotate(-60deg);
  
}
#box:hover :nth-child(2){
  transform: rotate(-50deg);
  
}
#box:hover :nth-child(3){
  transform: rotate(-40deg);
  
}
#box:hover :nth-child(4){
  transform: rotate(-30deg);
  
}
#box:hover :nth-child(5){
  transform: rotate(-20deg);
  
}
#box:hover :nth-child(6){
  transform: rotate(-10deg);
 
}
#box:hover :nth-child(7){
  transform: rotate(10deg);
  
}
#box:hover :nth-child(8){
  transform: rotate(20deg);
  
}
#box:hover :nth-child(9){
  transform: rotate(30deg);
  
}
#box:hover :nth-child(10){
  transform: rotate(40deg);
  
}#box:hover :nth-child(11){
  transform: rotate(50deg);
  }
#box:hover :nth-child(12){
  transform: rotate(60deg);
  
}

（9）灯的颜色变化

目标

完成 js/trafficlights.js 文件中的 red、green 和 trafficlights 函数，达到以下效果：

1. 页面加载完成 3 秒后灯的颜色变成红色。
2. 在灯的颜色变成红色的 3 秒后，灯的颜色变成绿色（即 6 秒后灯光变成绿色）。
3. 随后颜色不再变化。
4. 请通过修改 display 属性来显示不同颜色的灯的图片。

完成后的效果见文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。

题解

// TODO：完善此函数 显示红色颜色的灯
function red() {
    let redlight=document.querySelector('#redlight')
    let defaultlight=document.querySelector('#defaultlight')
    defaultlight.style.display='none'
    redlight.style.display='inline-block'
}

// TODO：完善此函数  显示绿色颜色的灯
function green() {
    let redlight=document.querySelector('#redlight')
    let greenlight=document.querySelector('#greenlight')
    redlight.style.display='none'
    greenlight.style.display='inline-block'
}

// TODO：完善此函数
function trafficlights() {
    setTimeout(()=>{
        red();
        setTimeout(()=>{
            green()
        },3000)
    },3000)
}

trafficlights();

（10）冬奥大抽奖

目标

找到 index.js 中 rolling 函数，使用 jQuery 或者 js 完善此函数，达到以下效果：

1. 点击开始后，以 class 为 li1 的元素为起点，黄色背景（.active 类）在奖项上顺时针转动。
2. 当转动停止后，将获奖提示显示到页面的 id 为 award 元素中。获奖提示必须包含奖项的名称，该名称需与题目提供的名称完全一致。
3. 转动时间间隔和转动停止条件已给出，请勿修改。

题解

// TODO：请完善此函数
function rolling() {
  time++; // 转动次数加1
  clearTimeout(rollTime);
  let li = document.querySelectorAll("li")
  rollTime = setTimeout(() => {
      for(let i = 0;i<li.length;i++){
       li[i].classList.remove("active");
      }
      if((time-1)%9 !== 4){
        li[(time-1)%9].classList.add("active");
      }
      else{
        li[(time)%9].classList.add("active");
      }
    window.requestAnimationFrame(rolling); // 进行递归动画
  }, speed);

  // time > times 转动停止
  if (time > times) {
    clearInterval(rollTime);
    $("#award").text(`恭喜你抽中了${li[(time-2)%9].textContent}!!!`);
    time = 0;
    return;
  }
}

（11）布局切换

目标

请在 index.html 文件中补全代码，最终实现数据渲染及切换布局的效果。

具体需求如下：

1. 完成数据请求（数据来源 goodsList.json，请勿修改该文件中提供的数据）。在项目目录下已经提供了 axios，考生可自行选择是否使用。效果如下：

1. 点击"列表效果"的图标，图标背景色变为红色（即 class=active），"大图效果"的图标背景色变为灰色（即 class=active 被移除），布局切换为列表效果。效果如下：

1. 点击"大图效果"的图标，图标背景色变为红色（即 class=active），"列表效果"的图标背景色变为灰色（即 class=active 被移除），布局切换为大图效果。效果如下：

题解

任务一

 mounted() {
      // TODO：补全代码实现需求
      axios('goodsList.json').then(res=>{
        this.goodsList = res.data
      })
    },

<!--grid 示例代码，动态渲染时可删除-->
      <ul class="grid" v-if="flag">
        <li  v-for="item in goodsList">
          <a href="#/3814" target="_blank"> <img :src="item.image.small" /></a>
        </li>
      </ul>
      <ul class="list" v-if="!flag">
        <li  v-for="item in goodsList">
          <a href="#/3814" target="_blank"> <img :src="item.image.large" /></a>
          <p>{{item.title}}</p>
        </li>
      </ul>

任务二三

        <a class="grid-icon active" @click="grid"></a>
        <a class="list-icon" @click="list"></a>


   methods:{
      grid(){
        document.querySelector('.grid-icon').classList.add('active')
        document.querySelector('.list-icon').classList.remove('active')
        this.flag=true
      },
      list(){
        document.querySelector('.grid-icon').classList.remove('active')
        document.querySelector('.list-icon').classList.add('active')
        this.flag=false
      }
    }

完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>布局切换</title>
    <script type="text/javascript" src="./js/vue.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
    <script
      src="./js/axios.min.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
  </head>
  <body>
    <div id="app" v-cloak>
      <!-- TODO：请在下面实现需求 -->
      <div class="bar">
        <a class="grid-icon active" @click="grid"></a>
        <a class="list-icon" @click="list"></a>
      </div>
      <!--grid 示例代码，动态渲染时可删除-->
      <ul class="grid" v-if="flag">
        <li  v-for="item in goodsList">
          <a href="#/3814" target="_blank"> <img :src="item.image.small" /></a>
        </li>
      </ul>
      <ul class="list" v-if="!flag">
        <li  v-for="item in goodsList">
          <a href="#/3814" target="_blank"> <img :src="item.image.large" /></a>
          <p>{{item.title}}</p>
        </li>
      </ul>
    </div>
  </body>
</html>
<script type="text/javascript">
  var vm = new Vue({
    el: "#app",
    data: {
      goodsList: [],
      flag:true
    },
    mounted() {
      // TODO：补全代码实现需求
      axios('goodsList.json').then(res=>{
        this.goodsList = res.data
      })
    },
    methods:{
      grid(){
        document.querySelector('.grid-icon').classList.add('active')
        document.querySelector('.list-icon').classList.remove('active')
        this.flag=true
      },
      list(){
        document.querySelector('.grid-icon').classList.remove('active')
        document.querySelector('.list-icon').classList.add('active')
        this.flag=false
      }
    }
  });
</script>

（12）购物车

目标

请在 index.html 文件中补全代码，最终实现购物车商品管理的功能。

注意：请勿修改 js/goods.js 文件中提供的数据！

具体需求如下：

（1）修改 addToCart 方法，实现将商品加入到购物车的功能。即：

1. 点击"加入购物车"按钮后，如果购物车中不存在该商品，则将该商品添加到购物车末尾，并初始化数量为 1；
2. 如果购物车中已存在该商品，则只在原数量上 +1 即可。

（2）完善 removeGoods 方法，实现移出购物车商品功能。即：

1. 点击购物车商品后对应的减号（"-"）按钮，将其数量在原数量上 -1；
2. 如果减后数量为 0，则将该商品从购物车中移除。

题解

任务一

用goods.num判断cartList是否含有此goods

addToCart(goods){
                // TODO：修改当前函数，实现购物车加入商品需求
                if(goods.num){
                  goods.num++;
                }else{
                  goods.num = 1;
                  console.log(this.cartList.includes(goods));
                  this.cartList.push(goods);
                }
                this.cartList = JSON.parse(JSON.stringify(this.cartList));
            },

任务二

 removeGoods(goods){
                // TODO：补全代码实现需求
                if(goods.num==1){
                  this.cartList.pop(goods)
                }else{
                  goods.num--
                }
            }

（13） 寻找小狼人

目标

在本题 index.html 已经给出的数组中，我们可以通过数组的 filter 方法：cardList.filter((item) => item.category == "werewolf") 返回一个都是狼人的新数组。但是技术主管为了考验大家的技术，规定了在代码中任何地方都不能出现 filter 关键字。所以我们需要封装一个 myarray 方法来实现类似数组 filter 的功能。

1. 狼人比较狡猾，筛选狼人的条件可能会变化，例如 item.name，请实现一个通用的方法。
2. 完成封装后，页面效果会自动完成，效果见文件夹下 effect.gif（请使用 VS Code 或者浏览器打开 gif 图片）

题解

谁调用我，this就指向谁

// TODO：待补充代码
  console.log(this)
  let arr = [];
  this.forEach(item=>{
    if(cb(item)){
      arr.push(item)
    }
  })
  return arr

（14）题目列表

请通过 VS Code 中的 live server 插件启动本项目，让项目运行起来，效果如下：

注意：一定要通过 live server 插件启动项目，避免项目无法访问，影响做题。

目标

1. 完成数据请求（数据来源 js/carlist.json）。在项目目录下已经提供了 axios，考生可自行选择是否使用。
2. 完成数据分页显示，每页 5 条数据，默认当前页码为第一页（即 pageNum = 1 ），按照顺序第一页显示 1-5 条，第二页显示 6-10 条，依此类推。将每条数据显示到 list-group 元素中。使用已有代码中 list-group，不要修改 list-group 元素的 DOM 结构。动态渲染时，list-group 示例代码可删除。
3. 当页码为第一页时，上一页为禁用状态（class=disabled），点击无任何变化。
4. 当页码为最后一页时，下一页为禁用状态（class=disabled），点击无任何变化。
5. 在 id 为 pagination 元素中正确显示当前页码 和总页码（即最大页码） 。当前页码变量使用 pageNum，总页码变量使用 maxPage。请勿修改当前页码 和总页码的变量名称，以免造成判题无法通过。

题解

let pageNum = 1; // 当前页码，默认页码1
let maxPage; // 最大页数
let limit = 5;
let dataList = [];
// TODO：待补充代码
//请求数据
axios({
  url: "./js/carlist.json",
}).then((res) => {
  dataList = res.data;
  maxPage = Math.ceil(dataList.length / limit);
  //默认显示第一页
  render();
});

//父元素
let group = document.querySelector(".list-group");
let showPage = document.querySelector('#pagination')

// 点击上一页
let prev = document.getElementById("prev");
prev.onclick = function () {
  // TODO：待补充代码
  pageNum--
  render();
  next.classList.remove("disabled");
  if (pageNum === 1) {
    prev.classList.add("disabled");
  }
};

// 点击下一页
let next = document.getElementById("next");
next.onclick = function () {
  // TODO：待补充代码
  pageNum++;
  render()
  prev.classList.remove("disabled");
  if (pageNum === maxPage) {
    next.classList.add("disabled");
  } 
};
//渲染函数
function render() {
  let arr = [];
  let start = (pageNum - 1) * limit;
  let end = start + limit;
  arr = dataList.slice(start, end);
  let str = "";
  for (let i = 0; i < arr.length; i++) {
    str += `<a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">${arr[i].name}</h5>
      <small>${arr[i].price}元</small>
    </div>
    <p class="mb-1">
     ${arr[i].description}
    </p>
    </a>`;
  }
  showPage.innerHTML = `共${maxPage}页，当前${pageNum}页`
  group.innerHTML = str;
}