蓝桥杯写题笔记（上）

链接：题单详情 - 蓝桥云课

一、电影院座位

CSS3

/* TODO：待补充代码 */
.seat-area {
  /* 弹性盒子 */
  display: flex;
  /* 自动换行 */
  flex-wrap: wrap;
  /* 添加间距 */
  row-gap: 10px;
  column-gap: 10px;
}
.seat-area:nth-child(4n+2){
    margin-left:20px
}

考点：伪类选择器nth-child(An+B)

• A 是整数步长，
• B 是整数偏移量，
• n 是从 0 开始的所有非负整数。

odd：表示奇数 1、3、5……

even：表示偶数 2、4、6……

补充：flex-wrap:wrap 表示自动换行，设置堆叠形式

二、水果拼盘

HTML5、CSS3

/* TODO：待补充代码 */
#pond {
  display: flex;
  //自动换行
  flex-wrap: wrap;
  //纵向排列
  flex-direction: column;
}

考点：flex布局

三、图片水印生成

JS函数封装

function createWatermark(text, color, deg, opacity, count) {
  // 创建水印容器
  const container = document.createElement("div");
  container.className = "watermark";
  // TODO: 根据输入参数创建文字水印
  for(let i=0; i<count; i++){
    //创建一个span标签
    const item = document.createElement("span");
    //添加css样式
    item.textContent = text;
    item.style.color = color;
    item.style.transform = `rotate(${deg}deg)`;
    item.style.opacity = opacity;
    //添加item标签到container水印容器
    container.appendChild(item);
  }
  return container;
}

考点：DOM操作

补充：

• innerHTML：获取或设置元素的 HTML 内容，包括标签。
• textContent：获取或设置纯文本内容，不包括 HTML 标签。
• innerText：获取或设置可见文本内容，考虑 CSS 样式的影响。

四、新鲜的蔬菜

HTML5、CSS3

/* TODO：待补充代码 */
.box{
  display: grid;
}
#box1 .item{
  /* grid-column: 2/3;
  grid-row: 2/3; */
  justify-self: center;
  align-self: center;
}
#box2 .item:last-child{
  /* grid-column: 3/4;
  grid-row: 3/4; */
  align-self: end;
  justify-self:end;
}
#box3 .item:nth-child(2){
  justify-self: center;
  align-self: center;
}
#box3 .item:last-child{
  justify-self: end;
  align-self: flex-end;
}

考点：gird布局

• grid-column：列跨度
• grid-row：行跨度

五、收集帛书碎片 🔶

JS函数封装

function collectPuzzle(...puzzles) {
  // TODO:在这里写入具体的实现逻辑
  // 对所有的拼图进行收集，获取不同拼图类型的结果，并返回
  //创建一个数组用于存放
  const arr1 = [];
  //1、遍历去重
  for(const puzzle of puzzles){
    for(const key in puzzle){
      if(!arr1.includes(puzzle[key])){
        arr1.push(puzzle[key]);
      }
    }
  }
  //使用flat将数组展开
  const arr = puzzles.flat();
  //2、set集合去重
  const arr2 = [...new Set(arr)];
  return arr2;
}

六、展开你的扇子

HTML5、CSS3

/*TODO：请补充 CSS 代码*/
#box:hover #item1 {
  transform: rotate(-60deg);
}
#box:hover #item2 {
  transform: rotate(-50deg);
}
#box:hover #item3 {
  transform: rotate(-40deg);
}
#box:hover #item4 {
  transform: rotate(-30deg);
}
#box:hover #item5 {
  transform: rotate(-20deg);
}
#box:hover #item6 {
  transform: rotate(-10deg);
}
#box:hover #item7 {
  transform: rotate(10deg);
}
#box:hover #item8 {
  transform: rotate(20deg);
}
#box:hover #item9 {
  transform: rotate(30deg);
}
#box:hover #item10 {
  transform: rotate(40deg);
}
#box:hover #item11 {
  transform: rotate(50deg);
}
#box:hover #item12 {
  transform: rotate(60deg);
}

七、自适应页面 🔶

/* TODO: 考生需要完成以下内容 */
@media (max-width:800px){
  label.menu-btn {
    display: block;
    height: 54px;
}
.menu{
  /* .row本来有一个margin: top 20px; */
  margin-bottom: 25px;
}
  .collapse{
    display: none;
    /* 需要脱离文档流，不然会挤压页面内容 */
    position: absolute;
    background-color: #252525;
  }
  /* ~：相邻选择器；checked：伪类选择器，代表input元素是被选中状态 */
  input.menu-btn:checked ~ul{
    display: flex;
    flex-direction: column;

  }
  .dropdown:hover ul{
    display: flex;
    flex-direction: column;
  }
  .box{
    margin:20px 20px 15px 20px;
  }
  .row{
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
  }
  #tutorials img{
    /* 图片居中 */
    margin: auto;
  }
}

八、蓝桥知识网

HTML5、CSS3

九、分一分

JS

const splitArray = (oldArr, num) => {
  // TODO：请补充代码实现功能
  oldArr.sort((a,b)=>a-b);
  let result = [];
  for(let i=0;i<oldArr.length;i+=num){
    result.push(oldArr.slice(i,i+num));
  }
  return result;
};

十一、灯的颜色变化

ES6

const defaultlight = document.getElementById("defaultlight") ;
const redLight = document.getElementById("redlight") ;
const greenlight = document.getElementById("greenlight") ;
// TODO：完善此函数 显示红色颜色的灯
function red() {
    defaultlight.style.display = "none";
    redLight.style.display = "inline-block";
    greenlight.style.display = "none";
}

// TODO：完善此函数  显示绿色颜色的灯
function green() {
    defaultlight.style.display = "none";
    redLight.style.display = "none";
    greenlight.style.display = "inline-block";
}

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

十二、和手机相处的时光

Echarts

var option = {
  title: {
    text: "一周的手机使用时长",
  },
  //type: "category"表示横坐标是分类数据
  xAxis: {
    type: "category",
    data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
  },
  //type: "value"表示纵坐标是数值数据
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [2.5, 2, 2.6, 3.2, 4, 6, 5],
      type: "line",
    },
  ],
};

十三、课程列表

JS

// const { axios } = require("./axios");

let pageNum = 1; // 当前页码，默认页码1
let maxPage; // 最大页数
let allData = [];
// TODO：待补充代码
axios
  .get("./js/carlist.json")
  .then((res) => {
    allData = res.data;
    console.log(allData);
    maxPage = Math.ceil(allData.length / 5);
    console.log(maxPage);
    upDatePageNum(pageNum);
  })
  .catch((error) => {
    console.log(error.message);
  });
function randerData(start, end) {
  let list = document.getElementById("list");
  list.innerHTML = '';
  allData.slice(start, end).forEach((data) => {
    console.log(data);
    document.getElementById("list").appendChild(createProjectItem(data));
  });
  document.getElementById("pagination").innerText = `共${maxPage}页，当前${pageNum}页`;
}
function upDatePageNum(pageNum) {
  console.log(pageNum,maxPage);
  let start = (pageNum - 1) * 5;
  let end = start + 5;
  randerData(start, end);
}
function createProjectItem({ name, description, price }) {
  console.log(name);
  let item = document.createElement("div");
  item.className = "list-group";
  item.innerHTML = `
    <a href="#" class="list-group-item list-group-item-action">
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">${name}</h5>
        <small>${price / 100}元</small>
      </div>
      <p class="mb-1">
        ${description};
      </p>
    </a>
  `;
  console.log(item);
  return item;
}
// 点击上一页
let prev = document.getElementById("prev");
prev.onclick = function () {
  // TODO：待补充代码
  document.querySelectorAll(".list-group").forEach((item)=>{
    item.classList.add("disabled")
});
  pageNum--;
  if(pageNum < 1) pageNum = 1; 
  upDatePageNum(pageNum);
};
// 点击下一页
let next = document.getElementById("next");
next.onclick = function () {
  // TODO：待补充代码
  document.querySelectorAll(".list-group").forEach((item)=>{
    item.classList.add("disabled")
});
  pageNum++;
  if(pageNum > maxPage) pageNum = maxPage;
  upDatePageNum(pageNum);
};

十四、冬奥大抽奖

JS

// TODO：请完善此函数
function rolling() {
  const indexItem = time % 8;
  const item = document.querySelector( `.li${indexItem+1}`);
  if(item)  item.classList.add("active");
  time++; // 转动次数加1
  clearTimeout(rollTime);
  rollTime = setTimeout(() => {
     item.classList.remove("active");
    window.requestAnimationFrame(rolling); // 进行递归动画
  }, speed);
  
  // time > times 转动停止
  if (time > times) {
    document.getElementById("award").textContent = `恭喜您抽中了${item.textContent}!!!`
    clearInterval(rollTime);
    time = 0;
    return;
  }
}

注意：转动结束后，中奖商品不取消active。每次开始抽奖时，清除所有active（重置）

十五、视频弹幕

JS

function renderBullet(bulletConfig, videoEle, isCreate = false) {
    const spanEle = document.createElement("SPAN");
    spanEle.classList.add(`bullet${index}`);
    if (isCreate) {
        spanEle.classList.add("create-bullet")
    }
    // TODO：控制弹幕的显示颜色和移动，每隔 bulletConfig.time 时间，弹幕移动的距离  bulletConfig.speed
    spanEle.style.left = `${videoEle.offsetWidth}px`;
    spanEle.style.color = `rgb(${getRandomNum(255)},${getRandomNum(255)},${getRandomNum(255)})`;
    spanEle.textContent = bulletConfig.value;
    const topSpeed = getRandomNum(videoEle.offsetHeight);
    spanEle.style.top = `${topSpeed}px`;
    console.log(topSpeed);
    videoEle.appendChild(spanEle);
    let leftPosition = videoEle.offsetWidth;
    const interval = setInterval(()=>{
        leftPosition -= bulletConfig.speed;
        spanEle.style.left = `${leftPosition}px`;
        if(leftPosition < -spanEle.offsetWidth){
            videoEle.removeChild(spanEle);
            console.log("Out");
            clearInterval(interval);
        }
    },bulletConfig.time);
}

document.querySelector("#sendBulletBtn").addEventListener('click', () => {
    // TODO:点击发送按钮，输入框中的文字出现在弹幕中
    bulletConfig.value = document.getElementById("bulletContent").value;
    renderBullet(bulletConfig,videoEle,true);
})

注意：setTimeout 仅执行一次，不会连续调用，这样无法实现弹幕的连续移动效果，应该使用setInterval，取消计时：clearInterval()

十六、外卖给好评

vue

<template>
  <div class="block">
    <span class="demonstration">请为外卖评分: </span>
    <ul class="rate-list">
      <li>
        <!-- TODO 补全 el-rate 属性 -->
        送餐速度：<el-rate v-model="speed" :show-score="true" @change="score"></el-rate>
      </li>
      <li>
        <!-- TODO 补全 el-rate 属性 -->
        外卖口味：<el-rate v-model="flavour" :show-score="true" @change="score"></el-rate>
      </li>
      <li>
        <!-- TODO 补全 el-rate 属性 -->
        外卖包装：<el-rate v-model="pack" :show-score="true" @change="score"></el-rate>
      </li>
    </ul>
  </div>
</template>
<script>
module.exports = {
  data() {
    return {
      speed: 0, // 送餐速度
      flavour: 0, // 外卖口味
      pack: 0, // 外卖包装
    };
  },
  /* TODO: 考生需要完成以下内容 */
  methods:{
    score(){
      if(this.speed&&this.flavour&&this.pack){
        this.$emit("change",{
          speed:this.speed,
          flavour:this.flavour,
          pack:this.pack
        })
      }
    }
  }
};
</script>

• v-model 用于双向绑定数据。
• : 用于动态绑定属性。
• @ 用于事件绑定。
• methods是组件的方法，包含了一个score方法
• $emit是 Vue 实例上用于触发自定义事件的方法，这个方法是 Vue 提供的内置 API，不能更改为其他名称。用于在父子组件之间进行事件通信，触发事件的同时可以传递参数。
• this.$emit('customEvent', data);第一个参数是事件名称，第二个参数是事件内容