蓝桥杯写题笔记（中）

用户076376710746
82 阅读1分钟

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

一、传送门

完整代码如下：

$(window).scroll(function () {
  // 页面滚动到指定范围，对应的侧边按钮字体变色
  // TODO：请补充代码实现功能
  const  top = document.querySelector("#lift a:nth-of-type(1)");
  const  middle = document.querySelector("#lift a:nth-of-type(2)");
  const  foot = document.querySelector("#lift a:nth-of-type(3)");
  let position = document.documentElement.scrollTop;
  top.classList.remove("active-color");
  middle.classList.remove("active-color");
  foot.classList.remove("active-color");
  if(position<960) top.classList.add("active-color");
  else if(position>=960 && position<1920) middle.classList.add("active-color");
  else if(position>=1920) foot.classList.add("active-color");
});

/**
 * @param {Object} scrollTopVal：到达指定位置需要滚动的高度
 * 点击按钮，滚动到指定位置
 */
function toFunction(scrollTopVal) {
  // TODO：请补充代码实现功能
  window.scrollTo({top:scrollTopVal,behavior:'smooth'});
}

相关知识拓展

1、scrollTo()方法

window.scrollTo({ top: 0, (left:0,) behavior: 'smooth' });

scrollTo() 接收一个对象作为参数，这个对象包含两个属性：

  • top：指定滚动到页面顶部的位置，top: 0 表示滚动到页面的最顶部。
  • behavior：控制滚动的方式，'smooth' 表示滚动过程应该是平滑的，而不是瞬间跳转到目标位置。
2、scrollIntoView()方法
function scrollToMiddle() { 
    const middleSection = document.getElementById('middle');
    middleSection.scrollIntoView({ behavior: 'smooth' });
}

首先获取到id=middle的元素，使用scrollIntoView函数直接定位到这个元素的位置

3、scrollTop属性

let scrollValue = document.documentElement.scrollTop document.documentElement.scrollTop = scrollTopVal

这个属性获取或设置页面的滚动位置。对于第一个代码，它表示从文档的顶部到当前视口（可见区域）顶部的距离。该属性通常用于检测或控制网页的滚动位置。

4、screenTop属性

const position = window.screenTop;

这个属性返回当前浏览器窗口相对于屏幕顶部的垂直位置。它表示浏览器窗口的顶部与屏幕上边缘之间的距离。这个属性通常用于获取浏览器窗口的相对位置，尤其在多显示器的环境中，它指示窗口的垂直位置。

5、scrollY和scrollTop的区别
  • scrollY 用于获取整个页面的垂直滚动距离，适用于 window 对象。
  • scrollTop 用于获取或设置某个特定元素的垂直滚动位置，适用于具有滚动条的元素，如：document.documentElement 或 div

二、布局切换（vue.js）

完整代码如下：

<body>
<div id="app" v-cloak>
  <!-- TODO：请在下面实现需求 -->
  <div class="bar">
    <a class="grid-icon" :class="{active: type =='grid' }" @click = "changeType('grid')"></a>
    <a class="list-icon" :class="{active:type=='list'}" @click="changeType('list')"></a>
  </div>
  <!-- 渲染grid -->
  <ul v-if="type=='grid'" class="grid">
    <li v-for="item in goodsList">
      <a :href="item.url" target="_blank"> <img :src="item.image.large" /></a>
    </li>
  </ul>
  <!-- 渲染list -->
  <ul v-if="type=='list'" class="list">
    <li v-for="item in goodsList">
      <a :href="item.url" target="_blank"> <img :src="item.image.small" /></a>
      <p>{{item.title}}</p>
    </li>
  </ul>
</div>
</body>
</html>
<script type="text/javascript">
  var vm = new Vue({
    el: "#app",
    data: {
      goodsList: [],
      type:"grid"
    },
    mounted() {
      // TODO：补全代码实现需求
      axios.get("./goodsList.json").then((Alldata)=>{
        this.goodsList = Alldata.data;
        // console.log(this.goodsList[1]);
      }).catch((err)=>{
        console.log(err);
      })
    },
    methods:{
      changeType(type){
        console.log(type);
        this.type = type;
      }
    }
  });
</script>

相关知识拓展：

1. 动态绑定属性（: 或 v-bind:）
  • 语法：<元素 :属性名="表达式">
  • 完整语法：<元素 v-bind:属性名="表达式">
2. 事件绑定（@ 或 v-on:）
  • 语法：<元素 @事件名="方法">
  • 完整语法：<元素 v-on:事件名="方法">
3. 动态类绑定（:class）
  • 对象语法：<元素 :class="{ 类名: 条件 }">
  • 数组语法：<元素 :class="[类名1, 类名2]">
  • 字符串语法：<元素 :class="类名字符串">
5. 其他动态绑定
  • style：<div :style="{ color: textColor, fontSize: fontSize + 'px' }"></div>
  • disabled：<input :disabled="isDisabled" />

条件渲染和列表渲染

1、v-if

v-if 用于根据条件动态地渲染或销毁 DOM 元素。如果条件为 true，则渲染元素；如果为 false，则不渲染（从 DOM 中移除）。

2、v-else 和 v-else-if
  • v-else：用于在 v-if 条件为 false 时渲染替代内容。
  • v-else-if：用于在多个条件之间进行选择。
3、v-for 指令
  • v-for 用于基于一个数组或对象渲染一个列表。它会遍历数组或对象的每一项，并为每一项生成一个对应的 DOM 元素。
  • 遍历数组：
<li v-for="(item, index) in items" :key="item.id">
{{ item.name }} </li>
  • 遍历对象：
<div v-for="(value, key) in object" :key="key"> 
{{ key }}: {{ value }} </div>
4、冲突

当 v-if 和 v-for 同时出现在一个元素上时，v-for 的优先级更高。这意味着 v-for 会先执行，然后再对每个项应用 v-if。

三、寻找小狼人

//HTML中调用函数
let newcardList = cardList.myarray(
  (item) => item.category == "werewolf"
);
//执行函数
// 返回条件为真的新数组
Array.prototype.myarray = function (cb) {
  // TODO：待补充代码
  let result = [];
  for(let i=0; i<this.length; i++){
    if(cb(this[i])){
      result.push(this[i]);
    }
  }
  return result;
};
  1. 初始化结果数组：

创建一个空数组 result，用于存储满足条件的元素。

  1. 遍历数组：

使用 for 循环遍历传入数组的每个元素。在每次迭代中，当前元素被赋值给变量 item。

  1. 执行回调函数：
  • 对每个 item，调用回调函数，并将 item作为参数传递给回调函数。（回调函数的参数一般为this[i]、i、this，即数组元素、索引、实例本身）
  • 回调函数接收 item 作为参数，并对其进行判断：item.category == "werewolf"。
  1. 条件判断与结果收集：

如果返回 true，将当前元素 item 添加到 result 数组中。

  1. 返回结果：

循环结束后，myarray 函数返回 result 数组，该数组包含所有满足回调函数条件的元素。

四、水果消消乐

效果不好但是提供了

// TODO：请补充代码
// 点击开始按钮后，该按钮被隐藏，方格上的图片显示后又隐藏。
// 点击方格，方格中的图片显示，页面显示两张图片后，比较图片是否相同。
// 如果图片上的水果相同，方格即可消除，并得 2 分；如果图片上的水果不相同，图片隐藏，并扣 2 分（分数可以为负数）。
// 在文本 “当前分数为：” 的冒号后面会实时统计当前的得分情况。
function startGame() {
    startBtn = document.getElementById('start');
    startBtn.style.display = 'none';
    
    document.querySelectorAll('img').forEach((item)=>item.style.display = 'block');
    setTimeout(()=>{
        document.querySelectorAll('img').forEach((item)=>item.style.display = 'none');
    },1000);
    boxBtn = document.querySelectorAll('.img-box');
    let count = 0;
    let res = [];
    let score = 0;
    boxBtn.forEach((e)=>{
        e.addEventListener('click',(item)=>{
            count++;
            let value = item.target.querySelector('img').alt;
            let child = item.target.querySelector('img');
            res.push({
                value:value,
                e:item,
                child:child
            })
            child.style.display = 'block';
            if(count==2){
                if(res[0].value==res[1].value){
                    console.log('yes');
                    res[0].e.target.style.display = 'none';
                    res[1].e.target.style.display = 'none';
                    score+=2;
                }
                else{
                    res[0].child.style.display = 'none';
                    res[1].child.style.display = 'none';
                    score-=2;
                }
                res = [];
                count=0;
            }
            document.getElementById('score').textContent = score;
        })
    })
}

五、智能停车系统

.cars {
  position: absolute;
  z-index: 2;
  width: 600px;
  height: 600px;
  display: flex;
  flex-direction: column;  /* 排成列*/
  /* TODO: 请为下方属性填空，不要更改其他选择器里的代码 */
  flex-wrap: wrap; 
  align-content: space-between;
  justify-content:space-between ;
}

六、用什么来计算

// TODO：请补充代码
let formula = "";
let result = "";
//默认没有式子
let flag = false;
document.querySelectorAll(".calc-button").forEach((e) => {
  e.addEventListener("click", (event) => {
    console.log(event.target.id);
    //重置
    if (event.target.id == "reset") {
      //式子置为空
      formula = "";
      //结果置为空
      result = "";
      document.getElementById("formula").value = formula;
      document.getElementById("result").value = result;
    }

    //结果
    else if (event.target.id == "equal") {
      //开根

      formula = formula.replace(/x/g, "*");
      formula = formula.replace(/÷/g, "/");
      console.log(formula);
      //显示在页面上
      try {
        result = eval(formula);
        if (isFinite(result)) {
          console.log(result);
          flag = true;
          document.getElementById("result").value = result;
        }
      } catch {
        console.log("cuowu");
        document.getElementById("result").value = "NaN";
      }
    }
    //加减乘除，显示式子
    else {
      if (event.target.id == "sqrt") {
        try {
          result = Math.sqrt(formula);
          document.getElementById("result").value = result;
        } catch {
          document.getElementById("result").value = "NaN";
        }
      } else {
        if (flag) {
          if (
            !(
              event.target.id == "add" ||
              event.target.id == "reduce" ||
              event.target.id == "multiply" ||
              event.target.id == "division"
            )
          ) {
            formula = "";
          }
          flag = false;
        }
        formula += event.target.textContent;
        console.log(formula);
        document.getElementById("formula").value = formula;
      }
    }
  });
});

七、年度明星项目

// 保存翻译文件数据的变量
let translation = {};
// 记录当前语言
let currLang = "zh-cn";
let allData = [];

// TODO: 请在此补充代码实现项目数据文件和翻译数据文件的请求功能
fetch('./js/translation.json')
.then((res)=>res.json())
.then((res)=>{
  translation = res;
  console.log(translation);
})
.catch((err)=>console.log(err));
fetch('./js/all-data.json')
.then((res)=>res.json())
.then((res)=>{
  allData = res;
  console.log(allData);
  randerData(0,15);
})
.catch((err)=>console.log(err))
// TODO-END
let page = 0;
// TODO: 请修改以下代码实现项目数据展示的功能
function randerData(start,end){
    if(page==45) {
    document.querySelector('.load-more').style.display = 'none';
    
  }
  //遍历每个数据并生成item添加到树
  allData.slice(start,end).forEach((item)=>{
    item = {
      ...item,
      description:currLang=='en'?item.descriptionEN:item.descriptionCN
    }
    $(".list > ul").append(createProjectItem(item));
  })
  page = end;
}
//点击加载更多
document.querySelector('.load-more').addEventListener('click',(event)=>{

  randerData(page,page+15);

})
// 以下代码（13-23行）为 createProjectItem 函数使用示例
// Mock一个项目的数据
const item = {
  icon: "bun.svg",
  description:
    "Incredibly fast JavaScript runtime, bundler, transpiler and package manager...",
  name: "Bun",
  stars: 37087,
  tags: ["runtime", "bun"],
};
// 添加至页面的项目列表中，查看页面可以看到有一行 bun 的项目数据
// $(".list > ul").append(createProjectItem(item));

// TODO-END

// 用户点击切换语言的回调
$(".lang").click(() => {
  // 切换页面文字的中英文
  if (currLang === "en") {
    $(".lang").text("English");
    currLang = "zh-cn";
  } else {
    $(".lang").text("中文");
    currLang = "en";
  }
  $("body")
    .find("*")
    .each(function () {
      const text = $(this).text().trim();
      if (translation[text]) {
        $(this).text(translation[text]);
      }
    });
  // TODO: 请在此补充代码实现项目描述的语言切换
  //找到p元素，找到它的index，判断是中文还是英文
  document.querySelectorAll('.desc').forEach((e)=>{
    const value = e.querySelector('p').textContent.trim();
    console.log(value);
    let ind = -1;
    allData.forEach((item,index)=>{
      ind = index;
      if(item.descriptionEN==value){

        e.querySelector('p').textContent = allData[ind].descriptionCN
      }else if(item.descriptionCN==value){
        
        e.querySelector('p').textContent = allData[ind].descriptionEN
      }
      else{
        console.log('no');
      }
    });
  })
});

// 生成列表DOM元素的函数，将该元素的返回值append至列表中即可生成一行项目数据
/**
 * @param  {string} name - 项目名称
 * @param  {string} description - 项目描述
 * @param  {string[]} tags - 项目标签
 * @param  {number} stars - 项目star数量
 * @param  {string} icon - 项目icon路径
 */
function createProjectItem({ name, description, tags, stars, icon }) {
  return `
    <li class="item">
      <img src="images/${icon}" alt="">
      <div class="desc">
        <h3>${name}</h3>
        <p>${description}</p>
        <ul class="labels">
          ${tags.map((tag) => `<li>${tag}</li>`).join("")}
        </ul>
      </div>
      <div class="stars">
        +${stars} 🌟
      </div>
    </li>
  `;
}

八、布局切换

// TODO：待补充代码
        layoutOptions.forEach(function (option) {
            option.classList.remove('active');})
        option.classList.add('active');

九、产品360度展示

const pipeline = async (initialValue, sequence) => {
    // TODO: 待补充代码
    console.log(sequence)
    for( let f of  sequence){
        initialValue = await f(initialValue);
    }
    return initialValue;
};
avatar
文章
阅读
粉丝