前言
叮叮叮~新一届的蓝桥杯省赛倒计时9天了~利用最后的时间再冲一冲！！！本章内容内容主要讲解第 十三届蓝桥Web省赛真题，接着往下看吧。
真题地址放在最下方了……
文章目录
第一题：水果拼盘
题目要求：将水果摆放到正确的盘子里。
这道题主要考察
css3的flex属性
我的思路：
根据题目提示，这道题要使用flex属性来完成。
你会发现CSS属性里面为水果和盘子高宽都设置成了20%，背景为宽高为100%，但是盘子已经是分布的很均匀，但是水果没有分布均匀，那这是如何实现的呢？
再往结构里看发现：盘子部分代码中设置了style。
所以这道题已经告诉你答案了，妥妥的送分题。
我的答案：
方法一：在CSS代码里#pond已经写过display:flex所以这里不用再写一遍。
/* TODO：待补充代码 */
#pond {
/* 允许内容换行 */
flex-wrap: wrap;
/* 使元素纵向从上往下排列（顶对齐）。 */
flex-direction: column;
}方法二：方法一的简写方式
flex-flow: column wrap第二题：课程列表
题目要求：
刚打开的页面如下，只有一条数据，而且是写死的。
这道题主要考察Javascript的知识
我的思路：
如下图：现在页面的数据是写死的，而我们想要达到的效果是一个类似于分页效果，所以肯定要去拿数据然后根据页码展示相应的数据上去。
①首先使用axios去请求接口获取数据。然后计算最大页数，根据题目要求一页展示五条数据，那么最大页数=数据总数/5，肯定会出现小数的情况且要向上取整。
②写一个渲染页面数据的函数，传入参数(当前页面所要的数据)。使用reduce将传入的数组中的数据遍历使用模板字符串插入到对应的里面。最后一起返回。注意，要将html结构中的list-group部分代码删掉，不然会有影响。
③当前的数据主要是使用slice函数从全部数据里截取出来。所以需要计算开始下标和结束的下标。开始下标=（当前页面-1)*一页展示的数据数量。结束下标=当前下标*一页展示的数据数量。
④点击上一页时先判断当前页面是否为1(第一页)，如果是那么就要禁止它再上一页，即为它添加类disabled。如果不是那么页面就减1，且计算当前页面的数据并渲染到页面中去(调用渲染页面的函数，并传参当前页面的数据)。
⑤点击下一页时先判断当前页面是否为最大页数，如果是那么就要禁止它再下一页，即为它添加类disabled。如果不是那么页面就加1，且计算当前页面的数据并渲染到页面中去。
⑥最后为点击上一页的时候开头加上删除上一页按钮的disabled类。点击下一页的时候开头加上删除下一页按钮的disabled类。
我的答案：
let pageNum = 1; // 当前页码，默认页码1
let maxPage; // 最大页数
// TODO：待补充代码
/*用来存储接口里所有数据的*/
var carlist={}
var list=document.getElementById('list')
axios.get('./js/carlist.json').then(res=>{
carlist=res.data
/*计算最大页面*/
maxPage=Math.ceil(res.data.length/5)
/*计算第一次，也就是页码为1的页面数据*/
data=carlist.slice((pageNum-1)*5,5*pageNum)
/*渲染到页面*/
list.innerHTML=template(data)
})
/*渲染数据到页面用的函数*/
function template(data) {
return data.reduce((prev,element)=>{
prev+=`
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">${element.name}</h5>
<small>${element.price/100}.00元</small>
</div>
<p class="mb-1">${element.description}</p>
</a>
</div>
`
return prev;
},'');
}
// 点击上一页
let prev = document.getElementById("prev");
prev.onclick = function () {
// TODO：待补充代码
prev.classList.remove('disabled');
if(pageNum!==1){
pageNum--;
data=carlist.slice((pageNum-1)*5,5*pageNum)
list.innerHTML=template(data)
}else{
prev.classList.add('disabled');
}
};
// 点击下一页
let next = document.getElementById("next");
next.onclick = function () {
// TODO：待补充代码
if(pageNum!==maxPage){
pageNum++;
data=carlist.slice((pageNum-1)*5,5*pageNum)
list.innerHTML=template(data)
}else{
next.classList.add('disabled');
}
};
第三题：展开你的扇子
题目要求：鼠标悬浮在元素上方的时候，元素呈扇形打开。
这道题主要是考察
CSS3的transform属性。transform属性可以对元素进行旋转，缩放，倾斜或平移等操作。
我的思路：
根据题目要求对元素一个一个进行旋转角度的设置。需要注意的是，角度的单位为deg，且角度为负数时表示逆时针转动。
我的答案：
/*TODO：请补充 CSS 代码*/
#box:hover #item12{
transform: rotate(60deg);
}
#box:hover #item11{
transform: rotate(50deg);
}
#box:hover #item10{
transform: rotate(40deg);
}
#box:hover #item9{
transform: rotate(30deg);
}
#box:hover #item8{
transform: rotate(20deg);
}
#box:hover #item7{
transform: rotate(10deg);
}
#box:hover #item6{
transform: rotate(-10deg);
}
#box:hover #item5{
transform: rotate(-20deg);
}
#box:hover #item4{
transform: rotate(-30deg);
}
#box:hover #item3{
transform: rotate(-40deg);
}
#box:hover #item2{
transform: rotate(-50deg);
}
#box:hover #item1{
transform: rotate(-60deg);
}第四题：和手机相处的时光
题目要求：这是一道修复题。
这道题主要是考察Echarts
我的思路：
很明显x轴的数据显示有问题，只需将xAsix和yAxis的type配置调换一下或者把xAsix和yAxis的type全删掉。
因为”value“数值轴，适用于连续数据。例如1、2、3、4、5。而“category”类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 yAxis 设置类目数据。
xAsix默认type是“category”，yAxis默认type是”value“。
我的答案：
方法一：xAsix的type修改为“category”，yAxis的type修改为“value”。
<script>
var chartDom = document.getElementById("main");
var myChart = echarts.init(chartDom);
/*TODO：ECharts 的配置中存在错误，请改正*/
var option = {
title: {
text: "一周的手机使用时长",
},
xAxis: {
type: "category",
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
},
yAxis: {
type: "value",
},
series: [
{
data: [2.5, 2, 2.6, 3.2, 4, 6, 5],
type: "line",
},
],
};
myChart.setOption(option);
</script>方法二：xAsix和yAxis的type全删掉
<script>
var chartDom = document.getElementById("main");
var myChart = echarts.init(chartDom);
/*TODO：ECharts 的配置中存在错误，请改正*/
var option = {
title: {
text: "一周的手机使用时长",
},
xAxis: {
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
},
yAxis: {
},
series: [
{
data: [2.5, 2, 2.6, 3.2, 4, 6, 5],
type: "line",
},
],
};
myChart.setOption(option);
</script>第五题：灯的颜色变化
题目要求：3s后红灯亮6s后绿灯亮，随后一直绿灯亮
这道题主要是考察JavaScript
我的思路：
①打开页面需要完善的地方你会发现最后只调用了一个函数trafficlights，所以red和green函数最后肯定是要在trafficlights函数中调用的，不然是没办法运行的。
②在red函数中只要处理红灯亮时会发生的事。红灯亮时隐藏默认灯，显示红灯。从页面中得知：控制display属性可以控制灯的显示隐藏，display为"none"为隐藏，display为"inline-block"为显示。
注意：至于为什么不将display设置为
block为显示，是因为项目文件默认给出的css代码中有写。
③在green函数中只要处理绿灯亮时会发生的事。绿灯亮时隐藏红灯，显示绿灯。
④写一个计时器，1s执行一次，再定义一个i值用于记录秒数。每过1s，i就往上加1。如果i==3那么就让红灯亮(调用red函数)，如果i==6那么就让绿灯亮(调用green函数)。
我的答案：
// TODO：完善此函数 显示红色颜色的灯
function red() {
/*获取红灯节点*/
var redlight=document.getElementById('redlight')
/*获取默认灯节点*/
var defaultlight=document.getElementById('defaultlight')
/*将红灯显示*/
redlight.style.display='inline-block'
/*将默认灯隐藏*/
defaultlight.style.display='none'
}
// TODO：完善此函数 显示绿色颜色的灯
function green() {
/*获取红灯节点*/
var redlight=document.getElementById('redlight')
/*获取绿灯节点*/
var greenlight=document.getElementById('greenlight')
/*将红灯隐藏*/
redlight.style.display='none'
/*将绿灯显示*/
greenlight.style.display='inline-block'
}
// TODO：完善此函数
function trafficlights() {
/*用于记录秒数*/
let i=0;
setInterval(()=>{
i++;
/*3s红灯亮*/
if(i==3){
red()
}
/*6s绿灯亮*/
if(i==6){
green()
}
},1000)
}
trafficlights();
第六题：布局切换
题目要求：
这道题主要是考察Vue
我的思路：
①首先使用axios发请求获取页面的数据。存储到this.goodList中。再动态渲染到页面上去。但是此时你会发现两个列表都显示出来了，这是不对的。因该是点击那个显示对应的列表才对，所以肯定需要v-if来控制这两个列表的显示隐藏，发现数据里好像没有参数可以控制它们，所以我们可以在data里定义一个参数flag来控制列表的显示与隐藏。当flag为true时就显示类为grid的列表。为false时就显示类为list的列表。
注意：为什么当flag为true时显示类为grid的列表。那是因为在类为grid-icon类中a标签中还有一个类active，active表示当前选中的图标。
②然后为类为grid-icon的a标签绑定单击事件。为类为grid-icon的a标签添加类active，删除类为list-icon的a标签中的active类。将flag值设为true。
③为类为list-icon的a标签绑定单击事件。为类为list-icon的a标签添加类active，删除类为grid-icon的a标签中的active类。将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="clickgrid"></a>
<a class="list-icon" @click="clickList"></a>
</div>
<!--grid 示例代码，动态渲染时可删除-->
<ul class="grid" v-for="(good,index) in goodsList" :key="index" v-if="flag">
<li>
<a :href="good.url" target="_blank"> <img :src="good.image.large" /></a>
</li>
</ul>
<ul class="list" v-for="(good,index) in goodsList" :key="index" v-if="!flag">
<li>
<a :href="good.url" target="_blank"> <img :src="good.image.small" /></a>
<p>{{good.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:{
clickgrid(){
var grid=document.querySelector('.grid-icon')
var list=document.querySelector('.list-icon')
grid.classList.add('active')
list.classList.remove('active')
this.flag=true
},
clickList(){
var grid=document.querySelector('.grid-icon')
var list=document.querySelector('.list-icon')
list.classList.add('active')
grid.classList.remove('active')
this.flag=false
}
}
});
</script>
第七题：蓝桥知识网
题目要求：页面布局题
这道题主要是考察页面布局
我的思路：
每个人都有每个人的布局方式吧，想了想还是把代码放上来了。我这块学的不是很好(缺少练习了)，写的也有些乱，仅供参考，想问一问你们是如何练习页面布局的，期待分享……。
我每次页面布局的时候都习惯于把外面的大致框架搭好，然后在写里面具体的，从外往里写。
我的答案：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<title>蓝桥知识网</title>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<!--TODO：请补充代码-->
<div id="cloudClass">
<div class="cloudClass-t">
<nav>
<div>蓝桥知识网</div>
<div>
<ul class="ul">
<li>首页</li>
<li>热门技术</li>
<li>使用手册</li>
<li>知识库</li>
<li>练习题</li>
<li>联系我们</li>
<li>更多</li>
</ul>
</div>
</nav>
<div class="center">
<div>蓝桥云课</div>
<div>随时随地丰富你的技术栈！</div>
<div>加入我们</div>
</div>
</div>
<div class="cloudClass-b">
<div class="content">
<div>
<div>人工智能</div>
<div class="content1">人工智能亦称智械、机器智能，指由人制造出来的机器所表现出来的智能。通常人工智能是指通过普通计算机程序来呈现人类智能的技术。</div>
</div>
<div>
<div>前端开发</div>
<div>前端开发是创建 WEB 页面或 APP 等前端界面呈现给用户的过程，通过 HTML，CSS 及 JavaScript 以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。</div>
</div>
<div>
<div>后端开发</div>
<div class="content1">后端开发是实现页面的交互逻辑，通过使用后端语言来实现页面的操作功能，例如登录、注册等。</div>
</div>
<div>
<div>信息安全</div>
<div>ISO（国际标准化组织）的定义为：为数据处理系统建立和采用的技术、管理上的安全保护，为的是保护计算机硬件、软件、数据不因偶然和恶意的原因而遭到破坏、更改和泄露。</div>
</div>
</div>
<hr/>
<div class="bottom">
<div>© 蓝桥云课 2022</div>
<div>京公网安备 11010102005690 号 | 京 ICP 备 2021029920 号</div>
</div>
</div>
</div>
</body>
</html>
/*
TODO：请补充代码
*/
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.cloudClass-t{
background-color: #a6b1e1;
padding-top: 19px;
}
/* 导航条部分 */
nav{
width: 1024px;
height: 46px;
line-height: 46px;
margin: 0 auto;
}
nav div:nth-child(1){
float: left;
margin-left: 16px;
color: white;
font-size: 18px;
}
nav div:nth-child(2){
float: right;
}
.ul>li{
float: left;
margin-right: 16px;
color: white;
font-size: 16px;
}
/* 导航条下面的部分 */
.center{
position: relative;
width: 1024px;
height: 427px;
text-align: center;
margin: 0 auto;
}
.center div:nth-child(1){
color: black;
font-size: 45px;
padding-top: 30px;
}
.center div:nth-child(2){
color: white;
font-size: 21px;
font-weight: 200;
margin-top: 62px;
}
.center div:nth-child(3){
position:absolute;
width: 100px;
height: 40px;
line-height: 40px;
color: #efbfbf;
font-size: 18px;
border-radius: 2px;
box-shadow: inset 0 0 0 2px #efbfbf;
margin-top: 36px;
left: 50%;
transform: translate(-50%,0);
}
/*下方文本部分*/
.cloudClass-b{
background-color: white;
padding-top: 74px;
}
.content{
display: flex;
flex-wrap: wrap;
width: 1024px;
height: 302px;
margin: 0 auto;
}
.content>div{
width: 50%;
}
.content>div>div:nth-child(1){
color: black;
font-size: 30px;
font-weight: 200;
margin-bottom: 10px;
}
.content>div>div:nth-child(2){
font-size: 18px;
color: #aaa;
line-height: 1.4em;
}
.content1{
margin-right: 20px;
}
/*最底部内容*/
.bottom{
width: 1024px;
height: 80px;
color: #aaa;
font-size: 14px;
text-align: center;
margin: 0 auto;
}
.bottom div:nth-child(1){
padding-top: 30px;
}
.bottom div:nth-child(2){
margin-top: 10px;
}第八题：购物车
题目要求：
这道题主要是考察Vue
我的思路：
①触发addToCart事件的时候。判断当前传入的商品是否在购物车中存在，如果存在就将购物车中的当前商品num+1，否则就添加到购物车数据中。首先第一次肯定是要添加进购物车的，所以判断如果购物车数据没有时(代表第一次点击+)，那么就直接添加进购物车数据，如果有表示不是第一次了，那么我们就要遍历购物车的数据和当前传入的数据做比较，存在就购物车与它相同的产品num+1，否则添加进购物车数据中。
② 触发removeGoods事件的时候。主要是需要判断当前物品的num是否为1，如果为1在点击-按钮时，它就要在数组中删除了。如果不为1那么num就num-1。
我的答案：
<script>
new Vue({
el: '#app',
data: {
cartList:[],//购物车数据
goodsList:[]//商品数据
},
mounted() {
this.goodsList = GoodsArr;
},
methods:{
addToCart(goods){
// TODO：修改当前函数，实现购物车加入商品需求
/*goods传进来时没有num值的，题目中已经给它们都添加了属性num，用于后面计算数量用的*/
goods.num = 1;
const {cartList} = this;
/*用于判断商品是否不存在于cartlist中*/
var count=0;
if(cartList.length!=0){
cartList.forEach(element => {
if(goods.name===element.name){
element.num++;
}else{
count++;
}
});
/*如果count等于cartList就表示没有找到，那么就要添加购物车数据里去*/
if(count===cartList.length){
this.cartList.push(goods);
}
}else{
this.cartList.push(goods);
}
this.cartList = JSON.parse(JSON.stringify(this.cartList));
},
removeGoods(goods){
// TODO：补全代码实现需求
const {cartList} = this
if(cartList[cartList.indexOf(goods)].num>1){
cartList[cartList.indexOf(goods)].num--
}else{
cartList.splice(cartList.indexOf(goods),1)
}
}
}
});
</script>第九题：冬奥大抽奖
题目要求：
这道题主要是考察Jquery
我的思路：
①题目要去要顺时针转动，观察页面结构发现它们正好时安装类的顺序来的一圈刚好是class=“li1”~class="li8"。所以我们要如何动态的获取对应的dom然后为其添加active类。发现里面有一个属性time是用来记录转动次数的，所以我们就利用它来获取对应的dom然后为其添加active类。
第一次进去 time 为1 要去的是类为li1的dom，以此类推当time为9的时候应该还是取li1。所以我们要对其进行判断time%8==0?8:time%8，如果time除以8取余为0的时候就取li8，否则就time除以8去余(1~7)所以它的取值范围就会一直保持在1~8啦。
②上面操作出现全部呈现为黄色的状态，所以在最开始的时候要将所有lin类上的active类删除。
③最后如果time>times时，也就是到达了转动的次数停止转动时。把当前值赋值给上方的文本框。
注意：要在time为0之前将值赋值给上方的文本框。
我的答案：
// TODO：请完善此函数
function rolling() {
time++; // 转动次数加1
clearTimeout(rollTime);
/*将所有lin类上的active类删除*/
for(var i=0;i<9;i++){
$(`.li${i}`).removeClass('active')
}
/*取对应的li并添加active类*/
$(`.li${time%8==0?8:time%8}`).addClass('active')
rollTime = setTimeout(() => {
window.requestAnimationFrame(rolling); // 进行递归动画
}, speed);
// time > times 转动停止
if (time > times) {
clearInterval(rollTime);
/*将最后停留在的类为lin上的值赋值给上面的框*/
$("#award").text($(`.li${time%8==0?8:time%8}`).text())
time = 0;
return;
}
}
第十题：寻找小狼人
题目要求：
这道题主要是考察JavaScript，往原型中添加方法。
我的思路：
①首先发现页面结构中只有一处使用了myarray方法，它并不像普通的方法一样直接调用，它的写法有点类似与forEach函数。所有我们知道这个函数一定是写在Array原型对象上的。不然是无法通过Array.myarray去调用的。
②再打开myarray.js文件发现已经默认给我们创建好了myarray方法，所以我们只需要去写里面的内容就可以了。需要知道的是myarray方法里的this就是此时调用这个方法的数组。所以我们可以遍历this，如果满足页面传入的条件，就添加到数组中，最后返回即可。
我的答案：
// 返回条件为真的新数组
Array.prototype.myarray = function (cb) {
// TODO：待补充代码
let werewolfList=[]
this.forEach((item)=>{
/*cb是(item) => item.category == "werewolf" ，是判断是否为狼人的条件*/
if(cb(item)){
werewolfList.push(item)
}
})
return werewolfList
};
结语
有哪里写的不正确的地方，请各位大佬帮忙及时矫正。第十三届的题目还是蛮简单的，讲真的没有模拟题难。最后，祝各位能在这届蓝桥杯大赛中取得满意的成绩！！！！
https://www.lanqiao.cn/problems/?first_category_id=2&sort=students_count&tags=%25E7%259C,%E7%9C%81%E8%B5%9B
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
