2099 字
10 分钟
蓝桥杯web刷题记录2
2025-07-21
2025-07-22
蓝桥杯web
code

【算法题】小兔子爬楼梯#

const climbStairs = (n) => {
    if(n <=2 ){
        return n
    } else {
        return climbStairs(n-1) + climbStairs(n-2)
    }


}
module.exports = climbStairs;

非常好的递归入门

【功能实现】购物车#

<!DOCTYPE html>
<html lang="en">


<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>购物车</title>
  <script src="./js/vue.js"></script>
  <script src="./js/axios.js"></script>
  <link rel="stylesheet" href="./css/element-ui.css">
  <link rel="stylesheet" href="./css/index.css">
</head>


<body>
  <div  id="app">
    <h4>购物车</h4>
    <!-- 购物车列表 -->
    <div>
      <el-card  v-for="(item,index) in carlist" :key="index">
        <!-- 商品图片 -->
        <img :src="item.img">
        <div>


          <span>
            <!-- 商品名称 -->
            {{ item.name }}
          </span>
          <div >
            <el-button type="text" >+</el-button>
            <el-button type="text" >
              <!-- 商品数量 -->
              {{item.num}}
            </el-button>
            <el-button type="text" >-</el-button>
          </div>
        </div>
      </el-card>
    </div>
  </div>
  </div>


  <!-- 引入组件库 -->
  <script src="./js/element-ui.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: {
        carlist: [] //购物车列表
      },
      created() {
        // 在这里使用axios 发送请求
        axios.get("carList.json").then((res)=>{
          this.carlist = res.data
        })
      },
    })




  </script>
</body>




</html>

【算法实现】随机数生成器#

/**
 * 封装函数，函数名 getRandomNum(min,max,countNum)
 * 生成 min~max 范围的 countNum 个不重复的随机数，存入数组并返回
 */
//生成指定数目和范围的随机数
const getRandomNum = function(min,max,countNum){
    var arr = [];
    function red(){
        let res = Math.floor(Math.random()*(max-min+1))+min
        // Math.random() * (max - min + 1)
        // 生成一个在 [0, max - min + 1) 的小数
        // 比如：min = 3, max = 7，就变成 [0, 5)
        // 最后 + min 把上一步的 0~(max-min) 映射成 min~max。
        return res
    }
    for(let i = 0;i<countNum;i++){
        let ress = red()
        if(!arr.includes(ress)){
            arr.push(ress)
        }
    }
    return arr;
}
module.exports = getRandomNum; //请勿删除

echarts 柱形图#

<!DOCTYPE html>
<html lang="en">


<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>echarts 柱形图</title>
  <script src="./echarts.js"></script>
</head>


<body>
  <div id="main" style="width: 600px;height:400px;"></div>


  <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
      title: {
        text: '学生成绩统计'
      },
      tooltip: {},
      legend: {
        data: ['成绩']
      },
      // TODO:待补充修改代码
      yAxis: {


      },
      // y轴
      xAxis: {
        data: ['张三', '李四', '王五', '贺八', '杨七', '陈九']


      },
      series: [
        {
          name: '成绩',
          type: 'bar',
          data: [55, 90, 65, 70, 80, 63]
        },


      ]
    };


    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  </script>




</body>


</html>

这道题平台给的打码有问题，将yAxis改成xAxis， yAxis 留空即可

【功能实现】时间管理大师#

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>任务管理器</title>


<link type="text/css" href="css/style.css" rel="stylesheet" />


</head>
<body>
<div id="box">
<div >
  <h2>Todos</h2>
  <p>罗列日常计划，做一个时间管理大师！</p>
  <div >
    <span>内容</span>
    <input type="text" placeholder="请输入你要做的事" v-model="newTodo"/>
    <span id='add' @click="add()">确认</span>
  </div>
</div>


<ul >
  <li v-if="todos.length==0">
    暂无数据
  </li>
  <li v-for="(item,index) in todos" :key="index">
    <!-- 前面的序号 -->
    <span >{{index++}}</span>
    <!-- 列表内容 -->
    <span>{{item}}</span>
    <!-- 删除按钮 -->
    <span  @click="deleted()"></span>
  </li>
  <li v-if="todos.length!=0">
    <b>
      总数：{{todos.length}}
    </b>
    <b id='clear' @click="clear()">清除</b>
  </li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
var top= new Vue({
  el:"#box",
  // 在此处补全代码，实现所需功能
  data(){
  return{
    todos:[],//存储数据的链表
    newTodo:"",//新添加的todo
  }
  },
  methods:{//生命周期钩子
  add(){
    if(this.newTodo =="") {
      this.newTodo = ""
    }else{
      this.todos.push(this.newTodo.trim())
      console.log(this.newTodo.trim())
    }
    this.newTodo=""//回复为空字符串，避免二次添加
  },
  clear(){
    this.todos=[]//清空列表
  },
  deleted(index){
    this.todos.splice(index,1)//splice(index,1) 方法就是从index下标开始删除一个元素，这里正好就是删除index元素自身
  }
  }


})
</script>
</body>
</html>

【功能实现】菜单树检索#

index.html
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test</title>
    <script src="./js/vue.js"></script>
    <script src="./js/axios.min.js"></script>
    <style>
      input{
        width: 200px;
        height: 32px;
        padding-left:5px;
      }
    </style>
  </head>
  <body>
    <!-- 需求：输入待查找的字段，输出包含该字段的所有菜单数据。
    1、若该菜单有父级菜单，则返回其父级菜单及同胞菜单。
    2、若该菜单有子级菜单，则返回该菜单及其下子级菜单。
    3、若该菜单既无父级也无子级，则返回菜单本身即可。
    测试字段：查询、首页、管理、配置、维护 -->
    <div id="app">
      <input type="text" placeholder="请输入要搜索的菜单内容" v-model="searchData"/>
      <ul>
        <li v-for="item in filteredMenus" :key="item.meta.title">
          <span :style="{ backgroundColor: item.checked ? 'yellow' : '' }">{{ item.meta.title }}</span>
          <ul v-if="item.children && item.children.length">
          <li v-for="child in item.children" :key="child.meta.title">
            <span :style="{ backgroundColor: child.checked ? 'yellow' : '' }">{{ child.meta.title }}</span>
          </li>
          </ul>
        </li>
        </ul>
    </div>
  </body>
  <script type="text/javascript" src="./js/index.js"></script>
</html>




//index.js
const app = new Vue({
  el: "#app",
  data() {
    return {
      menus: [],
      searchData: "",
    };
  },
  mounted() {
    axios.get('data.json').then(res => {
      this.menus = res.data;
    }).catch(err => {
      console.error("加载菜单数据失败", err);
    });
  },
  computed: {
    filteredMenus() {
      if (!this.searchData.trim()) {
        return this.menus;
      }
      return this.filterMenu(this.searchData.trim());
    }
  },
  methods: {
    filterMenu(value) {
      // 深拷贝菜单数据，避免污染原数据
      const menus = JSON.parse(JSON.stringify(this.menus));


      // 递归过滤函数
      function filterTree(items) {
        return items
          .map(item => {
            // 先过滤子菜单
            if (item.children) {
              item.children = filterTree(item.children);
            }


            // 当前菜单是否匹配 或 有匹配的子菜单
            if (
              item.meta.title.includes(value) ||
              (item.children && item.children.length > 0)
            ) {
              // 标记高亮，匹配项为 true，否则 false
              item.checked = item.meta.title.includes(value);
              return item;
            }
            // 不匹配则过滤掉
            return null;
          })
          .filter(item => item !== null);
      }


      return filterTree(menus);
    }
  }
});

让时钟转起来#

const oHoure = document.createElement('div');
const oMinute = document.createElement('div');
const oSecond = document.createElement('div');
oHoure.setAttribute('id', 'houre');
oMinute.setAttribute('id', 'minute');
oSecond.setAttribute('id', 'second');
oHoure.classList = 'pointer';
oMinute.classList = 'pointer';
oSecond.classList = 'pointer';
try {
    document.querySelector('.container').append(oHoure);
    document.querySelector('.container').append(oMinute);
    document.querySelector('.container').append(oSecond);
} catch (e) { }


function main() {
    const nowTime = new Date();
    const nowHoure = nowTime.getHours();
    const nowMinute = nowTime.getMinutes();
    const nowSecond = nowTime.getSeconds();
    const houreDeg = (nowMinute / 60) * 30;
    const minuteDeg = (nowSecond / 60) * 6;


    oHoure.style.transform = "rotate(" + (nowHoure * 30 + houreDeg) + "deg)";
    oMinute.style.transform = "rotate(" + (nowMinute * 6 + minuteDeg) + "deg)";
    // 请勿删除上方代码
    // 请在下方补充代码，使得时钟的秒针可以转动起来
    //nowSecond 是秒针 nowSecond.style.transform 可以直接修改秒针的css
    //rotate() 是transfor的一个参数，让元素围绕中心点旋转


    oSecond.style.transform="rotate(" + (nowSecond * 6) + "deg)";


}
main();


setInterval(() => {
    main()
}, 1000);

由文本溢出引发的“不友好体验”#

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <title>由文本溢出引发的“不友好体验”</title>
    <link rel="stylesheet" href="https://labfile.oss.aliyuncs.com/courses/9203/03style.css">
</head>


<body>
    <div >
        <ul>
            <li ><span ></span><a
                    href="" target="_blank">
                    <div ><img src="https://labfile.oss.aliyuncs.com/courses/9203/04_02.jpg"
                             alt="">
                    </div>
                    <div >
                        <p >
                            <i >新课</i>
                            随着前端的发展，UI 框架经历了刀耕火种的时代，层出不穷的 UI 框架让前端再次大放异彩。ElementUI
                            作为前端发展史上最为经典的组件库之一，学习并了解它是如何构建的，以及它的源码是如何搭建出 UI 组件的，都将为我们今后的发展与应用提供可借鉴之处！
                        </p>
                        <div >
                            <div ><i>¥</i><span >72.<span
                                        >00</span></span></div>
                        </div>
                    </div>
                </a></li>
        </ul>
    </div>
    <script>
                            //   -webkit-line-clamp: 2;
                            //     /* 规定行数为2 */
                            //     overflow: hidden;
                            //     /* 隐藏超出部分 */
                            //     text-overflow: ellipsis;
                            //     /* 超出部分用省略号代替 */
        document.querySelector('.more2_info_name').style="-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;"
    </script>
</body>


</html>

为图片添加景深效果#

<html>


<head>
    <META charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>为图片添加景深效果</title>
    <link rel="stylesheet" href="https://labfile.oss.aliyuncs.com/courses/9203/style06.css">
</head>


<body>
    <header>
        <div><img  src="https://labfile.oss.aliyuncs.com/courses/9203/autumn-1.png" title="枫叶林"></div>
        <div><img  src="https://labfile.oss.aliyuncs.com/courses/9203/autumn-2.png" title="人物"></div>
        <div><img  src="https://labfile.oss.aliyuncs.com/courses/9203/autumn-3.png"></div>
        <div><img  src="https://labfile.oss.aliyuncs.com/courses/9203/autumn-4.png"></div>
        <div><img  src="https://labfile.oss.aliyuncs.com/courses/9203/autumn-5.png"></div>
        <div><img  src="https://labfile.oss.aliyuncs.com/courses/9203/autumn-6.png"></div>
    </header>
    <script>
      // 请在这里编写代码，根据需求，使得图片达到景深效果
      document.querySelector('.img1').style.filter="blur(0px)"
      document.querySelector('.img2').style.filter="blur(0px)"
    </script>
</body>


</html>

element-ui 组件二次封装#

<template>
  <div >
    <el-table
      ref="singleTable"
      highlight-current-row
      :data="tableData"
      stripe
      border
      style="width: 100%"
    >
      <el-table-column label="单选" width="80">
        <!-- TODO：完善单选按钮组件，实现需求（DOM 结构不能修改） -->
        <template slot-scope="scope">
          <el-radio :label="scope.$index" v-model="currentRow"> </el-radio>
        </template>
      </el-table-column>
      <el-table-column label="日期" width="180">
        <template slot-scope="scope">
          📅<span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
    <div >
      <el-button @click="setCurrent(tableData[1])">选中第二行</el-button>
      <el-button @click="setCurrent()">取消选择</el-button>
    </div>
  </div>
</template>


<script>
module.exports = {
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      currentRow: null,
    };
  },
  methods: {
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row); // 设置当前选中行
    },
  },
};
</script>
<style scoped>
.main {
  width: 60%;
  margin: 0 auto;
}
.tools {
  margin-top: 20px;
  text-align: center;
}
</style>

凭空消失的 TA#

    <script src="./element-ui-2.15.10/index.js" ></script>

用户名片#

.center {
  position: absolute;
  /* 绝对定位 */
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);


}

网页 PPT#

const sections = document.querySelectorAll(".container section")
function switchPage() {
  // TODO: 请补充该函数，实现根据activeIndex切换页面的功能，并且在到达最后一页或第一页时给相应的按钮添加disable类
  sections.forEach(item => item.style.display='none')
  sections[activeIndex].style.display='block'


  document.querySelectorAll('.btn').forEach(item=>item.classList.remove('disable'))
  if(activeIndex ==4 ) {document.querySelector('.right').classList.add('disable')}
  if(activeIndex ==0 ) {
    document.querySelector('.left').classList.add('disable')
  }
  document.querySelector('.page').textContent = `${activeIndex+1}/5`


}

西游记之西天取经#

    animation: a4 0.8s steps(8) infinite;

为 animation 添加 infinite 属性即可，使动画无限循环。

商品销量和销售额实时展示看板#

    // TODO：补全 `yAxis` 的设置，要求“销售额”（即，配置项 `name`）的位置（即，配置项 `position`）在图表的左侧，“销量”（即，配置项 `name`）的位置（即，配置项 `position`）在图表的右侧。
    yAxis: [{
        type: 'value',
        name: '销售额',
        position: 'left',
    },
    {
        type: 'value',
        name: '销量',
        position: 'right',
    }],




    // TODO：补全代码，正确给 X 轴的时间，以及 Y 轴的商品的销售额 saleObj 和销量赋值 countObj。
    charData.xAxis.data = Object.keys(result.data.countObj)
    charData.series[0].data = Object.values(result.data.saleObj)
    charData.series[1].data = Object.values(result.data.countObj)

电影院排座位#

/* TODO：待补充代码 */
.seat-area {
  display: grid;
  margin-top: 50px;
  gap: 10px;
  grid-template-columns: 45px 65px 45px 45px 45px 65px 45px 45px;
}

图片水印生成#

  for (let index = 0; index < count; index++) {
    container.innerHTML +='<span style="color:'+color +';transform: rotate('+deg+'deg); opacity:'+opacity+'">'+text+'</span>'
  }
蓝桥杯web刷题记录2
https://blog.fiveqm.com/archives/545
作者
inuyume
发布于
2025-07-21
许可协议
CC BY-NC-SA 4.0
leetcode 刷题记录1
蓝桥杯web刷题记录1
© 2026 inuyume. All Rights Reserved. / RSS / Sitemap
Powered by Astro & Fuwari
萌ICP备20240106号