蓝桥杯web刷题记录2

发布于 9 天前  31 次阅读

【算法题】小兔子爬楼梯

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

					<span>
						<!-- 商品名称 -->
						{{ item.name }}
					</span>
					<div class="bottom clearfix">
						<el-button type="text" class="button">+</el-button>
						<el-button type="text" class="button">
							<!-- 商品数量 -->
							{{item.num}}
						</el-button>
						<el-button type="text" class="button">-</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 class="head">
	<h2>Todos</h2>
	<p>罗列日常计划，做一个时间管理大师！</p>
	<div class="input">
		<span>内容</span>
		<input type="text" placeholder="请输入你要做的事" v-model="newTodo"/>
		<span id='add' @click="add()">确认</span>
	</div>
</div>

<ul class="list">
  <li v-if="todos.length==0">
  	暂无数据
  </li>
	<li v-for="(item,index) in todos" :key="index">
		<!-- 前面的序号 -->
		<span class="xh">{{index++}}</span>
		<!-- 列表内容 -->
		<span>{{item}}</span>
		<!-- 删除按钮 -->
		<span class="qc" @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 class="container">
        <ul>
            <li class="more2_item more2_item_good hover-on"><span class="more2_item_gdot"></span><a class="more2_lk"
                    href="" target="_blank">
                    <div class="more2_img"><img src="https://labfile.oss.aliyuncs.com/courses/9203/04_02.jpg"
                            class="lazyimg_img" alt="">
                    </div>
                    <div class="more2_info">
                        <p class="more2_info_name">
                            <i class="more2_info_self">新课</i>
                            随着前端的发展，UI 框架经历了刀耕火种的时代，层出不穷的 UI 框架让前端再次大放异彩。ElementUI
                            作为前端发展史上最为经典的组件库之一，学习并了解它是如何构建的，以及它的源码是如何搭建出 UI 组件的，都将为我们今后的发展与应用提供可借鉴之处！
                        </p>
                        <div class="more2_info_price more2_info_price_plus more2_info_price_newcomer">
                            <div class="mod_price"><i>¥</i><span class="more2_info_price_txt">72.<span
                                        class="more2_info_price_txt-decimal">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 class="img1" src="https://labfile.oss.aliyuncs.com/courses/9203/autumn-1.png" title="枫叶林"></div>
        <div><img class="img2" src="https://labfile.oss.aliyuncs.com/courses/9203/autumn-2.png" title="人物"></div>
        <div><img class="img3" src="https://labfile.oss.aliyuncs.com/courses/9203/autumn-3.png"></div>
        <div><img class="img4" src="https://labfile.oss.aliyuncs.com/courses/9203/autumn-4.png"></div>
        <div><img class="img5" src="https://labfile.oss.aliyuncs.com/courses/9203/autumn-5.png"></div>
        <div><img class="img6" 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 class="main">
    <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">&nbsp;</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 class="tools">
      <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>'
  }
最后更新于 2025-07-22
啥也没有呀