当前位置：网站首页>[Blue Bridge Cup web] analysis of the real topic of the 13th Blue Bridge Cup web university group match in 2022
[Blue Bridge Cup web] analysis of the real topic of the 13th Blue Bridge Cup web university group match in 2022
2022-07-01 19:58:00 【Underwater barbecue shop AI】
Preface
See for the analysis of the real problem of provincial competition ：
2022 The 13th Blue Bridge Cup Web Analysis of the real problem of the provincial competition of the University Group （ Full version ）
2022 The 13th Blue Bridge Cup Web Analysis of the real problem of the provincial competition of the University Group （ Essence version ）
It was too long to write the provincial game analysis before , The writing is garish , Lead to poor reading experience , This time I won't fix those , Post code directly , The parsing is written in the code comments , I believe you can understand it after a little thinking , alike , Corresponding True question code And I'll share it with you ：
「 Blue Bridge Cup 」https://www.aliyundrive.com/s/7fsobhSy8dZ Extraction code : 34pi
If the boss has good opinions when reading the article , Or found a problem , Please leave more messages , Discuss with each other
List of articles
- Preface
- 1、 One point (5 branch )
- 2、 Fresh vegetables (5 branch )
- 3、 Fruit Xiaole (10 branch )
- 4、 With what to do the calculation A (10 branch )
- 5、 The opening gifts were given away (15 branch )
- 6、 Rights management (15 branch )
- 7、 Let's meet together (20 branch )
- 8、 Weather trends A (20 branch )
- 9、JSON generator (25 branch )
- 10、 Mall management system (25 branch )
- Sum up the experience
1、 One point (5 branch )
/** * @param {Object} oldArr * @param {Object} num * */
const splitArray = (oldArr, num) => {
// TODO： Please supplement the code to realize the function
let newArr = [];
// After ascending sorting, deconstruct and assign a deep copy to oldArr2
let oldArr2 = [...oldArr.sort((a, b) => a - b)];
const len = oldArr2.length;
for (let i = 0, j = 0; i < len; i += num, j++) {
// splice() Method to modify an array by deleting or replacing existing elements or adding new elements in place , And return the modified content as an array . This method will change the original array .
newArr[j] = oldArr2.splice(0, num);
}
return newArr;
};
module.exports = splitArray; // Detection needs , Do not delete
2、 Fresh vegetables (5 branch )
/* TODO： Code to be supplemented */
#box1 {
display: flex;
justify-content: center;
align-items: center;
}
#box2, #box3 {
display: flex;
flex-direction: column;
justify-content: space-between;
}
#box2 span:nth-child(2), #box3 span:nth-child(3) {
align-self: flex-end;
}
#box3 span:nth-child(2) {
align-self: center;
}
3、 Fruit Xiaole (10 branch )
// TODO： Please add the code
function startGame() {
$("img").show(500);
$("#start").hide();
$("img").hide(500);
// Number of hits
let i = 0;
// Store the clicked elements
let clickImg = [];
[...$(".img-box")].forEach((item) => {
item.onclick = function () {
i++;
if (i <= 2) {
$(item.children).show();
clickImg.push(item);
if (i === 2) {
setTimeout(() => {
let score = $("#score")[0];
if (
clickImg[0].children[0].alt ===
clickImg[1].children[0].alt
) {
score.innerHTML = Number(score.innerHTML) + 2;
$(clickImg[0]).css({
// Hide the element and keep its position
visibility: "hidden",
});
$(clickImg[1]).css({
visibility: "hidden",
});
} else {
score.innerHTML = Number(score.innerHTML) - 2;
$(clickImg[0].children[0]).hide();
$(clickImg[1].children[0]).hide();
}
clickImg = [];
i = 0;
}, 400);
}
}
};
});
}
4、 With what to do the calculation A (10 branch )
// TODO： Please add the code
const btn = document.getElementsByClassName("calc-button");
const formula = document.getElementById("formula");
const result = document.getElementById("result");
// Computer expression display
let showText = "";
// The result of the calculation is
let num = "";
[...btn].forEach((item) => {
item.onclick = function () {
switch (this.id) {
// Click on =
case "equal":
// eval() The function takes the incoming string as JavaScript Code execution .
num = eval(showText.replace("x", "*").replace("÷", "/"));
result.value = num;
return;
// Click on √
case "sqrt":
num = eval(showText.replace("x", "*").replace("÷", "/"));
num = Math.sqrt(num);
result.value = num;
return;
// Click on AC
case "reset":
showText = "";
num = "";
formula.value = showText;
result.value = num;
return;
default:
showText += this.innerHTML;
formula.value = showText;
return;
}
};
});
5、 The opening gifts were given away (15 branch )
Only the page implementation of short answer is examined , Everyone's implementation is different , The code is also very different , No more code here
6、 Rights management (15 branch )
$(function () {
// Use ajax obtain userList.json Data and render to the page
getData();
// Add an event to the button
$("#add").click(function () {
// TODO： Supplementary code , Realization function
// Get the selected option
let option = $("#leftSelect option:selected");
// jQ Method ：each() Traverse jQ Get the node
option.each((index, item) => {
// Delete the corresponding option
$(`#leftSelect option[value=${
item.value}]`).remove();
// Add... To the right option
$("#rightSelect")[0].add(new Option(item.value, item.value));
});
changeAccess(" Administrators ", option);
});
$("#addAll").click(function () {
// TODO： Supplementary code , Realization function
let option = $("#leftSelect option");
option.each((index, item) => {
$(`#leftSelect option[value=${
item.value}]`).remove();
$("#rightSelect")[0].add(new Option(item.value, item.value));
});
changeAccess(" Administrators ", option);
});
$("#remove").click(function () {
// TODO： Supplementary code , Realization function
let option = $("#rightSelect option:selected");
option.each((index, item) => {
$(`#rightSelect option[value=${
item.value}]`).remove();
$("#leftSelect")[0].add(new Option(item.value, item.value));
});
changeAccess(" Ordinary users ", option);
});
$("#removeAll").click(function () {
// TODO： Supplementary code , Realization function
let option = $("#rightSelect option");
option.each((index, item) => {
$(`#rightSelect option[value=${
item.value}]`).remove();
$("#leftSelect")[0].add(new Option(item.value, item.value));
});
changeAccess(" Ordinary users ", option);
});
});
/** * Modify the permissions * @param {Object} right Permission to modify * @param {Object} changeList List of users to modify permissions */
function changeAccess(right, changeList) {
// TODO： Supplementary code , Realization function
changeList.each((index, item) => {
// take option.value And tr.name Corresponding , Find the corresponding td And modify the content
// jQ Method ：:last Get the last element
$(`#userList tr[name=${
item.value}] td:last`).html(right);
});
}
// Get data asynchronously
function getData() {
// TODO： Supplementary code , Realization function
$.ajax("./js/userList.json").then((res) => {
res.forEach((item) => {
// jQ Method ：html() Set up html Content
$("#userList tbody").html(
$("#userList tbody").html() +
` <tr name=${
item.name}> <td>${
item.name}</td> <td>${
item.right ? " Administrators " : " Ordinary users "}</td> </tr>`
);
});
});
}
7、 Let's meet together (20 branch )
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Let's meet together </title>
<link rel="stylesheet" type="text/css" href="./css/index.css" />
<link rel="stylesheet" href="./css/iconfont/iconfont.css" />
</head>
<body>
<div id="app">
<!-- TODO： Please implement the requirements below -->
<!-- Sign in / Logout window -->
<div class="login">
<div class="left-tools">
<a class="close-btn"></a>
<a class="shrink-btn"></a>
</div>
<h3>{
{
isLogin?' Cancellation ':' Sign in '}}</h3>
<p v-if="!isLogin">
Select the user ：<select id="selectUser" @change="changeOption($event)">
<option :value="item.id" v-for="item in list" :key="item.id">{
{
item.name}}</option>
</select>
</p>
<p v-else> The current user is ：{
{
loginUser.name}}</p>
<a class="login-btn" @click="btn">{
{
isLogin?' Cancellation ':' Sign in '}}</a>
</div>
<!-- The user list window button is displayed on the right -->
<button id="show" class="right-btn" v-if="!showUser&&isLogin" @click="showUser=true">
<span class="iconfont icon-left-arrow"></span>
</button>
<!-- User list window -->
<div class="user-dialog" v-if="isLogin&&showUser">
<!-- Toolbar on the upper side of the user list window -->
<ul class="tools">
<li class="tools-left">
<button :class="{'active':isButton<0}" @click="isButton=-1">
<span class="iconfont icon-close"></span>
</button>
<button :class="{'active':isButton=='0'}" @click="isButton=0">
<span class="iconfont icon-dialog"></span>
</button>
<button :class="{'active':isButton>0}" @click="isButton=1">
<span class="iconfont icon-list"></span>
</button>
</li>
<li class="tools-right">
<button class="show-list" @click="showUser=false">
<span class="iconfont icon-retract"></span>
</button>
</li>
</ul>
<!-- User list -->
<ul class="say-list">
<li>
<span class="iconfont icon-microphone"></span>
</li>
<li class="line"></li>
<li> Talking ：{
{
list.find(item=>item.isHost).name}};</li>
</ul>
<ul class="user-list">
<li v-show="isButton>=0">
<img class="header" :src="loginUser.imgPath" />
<div class="user-name">
<span class="iconfont icon-user header-icon" v-if="loginUser.isHost"></span>
<span class="iconfont icon-microphone"></span> {
{
loginUser.name}}
</div>
</li>
<li v-for="item in list" :key="item.id" v-if="item.id!==loginUser.id" v-show="isButton>0">
<img class="header" :src="item.imgPath" />
<div class="user-name">
<span class="iconfont icon-user header-icon" v-if="item.isHost"></span>
<span class="iconfont icon-microphone"></span> {
{
item.name}}
</div>
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript" src="./js/axios.min.js"></script>
<script type="text/javascript">
// TODO： Please implement the requirements below
new Vue({
el: "#app",
data: {
// User list
list: [],
// Select the user id
value: '1',
// Log in
isLogin: false,
// Whether to display the user participation window
showUser: true,
// Login user information
loginUser: {
},
// The user list shows the state of effect switching
isButton: 0
},
created() {
axios.get('./js/userList.json').then(res => {
this.list = res.data
})
},
methods: {
btn() {
this.isLogin = !this.isLogin
if (this.isLogin) {
this.loginUser = this.list.find(item => item.id == this.value)
} else {
this.loginUser = {
}
this.value = '1'
this.isButton = 0
this.showUser = true
}
},
// When selecting the drop-down box user
changeOption(e) {
this.value = e.target.value
}
}
});
</script>
</body>
</html>
8、 Weather trends A (20 branch )
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title> Weather trends </title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="./js/axios.js"></script>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div class="top-bar">2022 year Y Annual temperature statistics of the city </div>
<!-- The main body -->
<div class="container">
<!-- month -->
<div class="month">
<ul>
<!-- TODO： Code to be supplemented In the following li Complete in the label 12 Month ( namely monthList) Rendering of -->
<!-- The English name of the selected month is equal to key, On behalf of this data, select -->
<li v-for="(item,key,index) in monthList" :class="[monthName===key?'active':'']" @click="changeMonth(key,index)">
{
{
item}}</li>
</ul>
</div>
<div class="chart">
<!-- TODO： Code to be supplemented -->
<!-- currentMonth The next seven days and this month tab Switch , Only the current month is displayed -->
<!-- Select the serial number of the month （ Corresponding to the month -1） Flag equal to the current month （ The current month -1） Time display -->
<div id="currentMonth" v-if="monthNumber===nowMonth">
<div class="title">
<h3>{
{
typeTitle}}</h3>
<div class="type" @click="clickType($event)">
<span id="seven" :class="{'active':!type}"> future 7 God </span>
<span id="current" :class="{'active':type}"> This month, </span>
</div>
</div>
</div>
<div id="chart"></div>
</div>
</div>
</div>
</body>
</html>
<script>
// TODO： Code to be supplemented
var vm = new Vue({
el: "#app",
data: {
chart: null, // Chart
chartOptions: null, // Chart configuration items
typeTitle: " Weather this month ",
monthList: {
January: "1 month ",
February: "2 month ",
March: "3 month ",
April: "4 month ",
May: "5 month ",
June: "6 month ",
July: "7 month ",
August: "8 month ",
September: "9 month ",
October: "10 month ",
November: "11 month ",
December: "12 month ",
},
// All data requested
data: [],
// Choose the English name of the month
monthName: 'January',
// Select the serial number of the month （ Corresponding to the month -1）
monthNumber: 0,
// Flag of the current month （ The current month -1）
nowMonth: new Date().getMonth(),
// x Axis ,y Axis data
yData: [],
xData: [],
// future 7 Status of day and month data
type: 1
},
mounted: async function() {
const res = await axios.get('./js/weather.json');
this.data = res.data;
// initialization x Axis and y Axis data
this.yData = res.data[0]['January'];
// according to y How many pieces of shaft temperature data are judged x How many days does the axis have
this.xData = [...this.yData.map((e, i) => i + 1)];
// initialization echarts
this.$nextTick(() => {
this.initChart();
});
},
methods: {
initChart() {
// Initialization diagram
this.chart = echarts.init(document.getElementById("chart"));
// Configuration item
this.chartOptions = {
grid: {
top: 35,
bottom: 5,
left: 10,
right: 10,
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
lineStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: "rgba(255,255,255,0)",
}, {
offset: 0.5,
color: "rgba(255,255,255,1)",
}, {
offset: 1,
color: "rgba(255,255,255,0)",
}, ],
global: false,
},
},
},
},
xAxis: [{
type: "category",
boundaryGap: false,
axisLabel: {
formatter: "{value}",
fontSize: 12,
margin: 20,
textStyle: {
color: "#bfbfbf",
},
},
axisLine: {
lineStyle: {
color: "#e9e9e9",
},
},
splitLine: {
show: true,
lineStyle: {
color: "#f7f7f7",
},
},
axisTick: {
show: false,
},
// x Data displayed on the axis , date
data: this.xData,
}, ],
yAxis: [{
boundaryGap: false,
type: "value",
axisLabel: {
textStyle: {
color: "#bfbfbf",
},
formatter: `{value}\u2103`,
},
nameTextStyle: {
color: "#fff",
fontSize: 12,
lineHeight: 40,
},
splitLine: {
lineStyle: {
color: "#f7f7f7",
},
},
axisLine: {
show: true,
lineStyle: {
color: "#e9e9e9",
},
},
axisTick: {
show: false,
},
}, ],
series: [{
name: " The weather ",
type: "line",
smooth: false,
showSymbol: false,
symbolSize: 0,
zlevel: 3,
itemStyle: {
color: "#ff6600",
borderColor: "#a3c8d8",
},
lineStyle: {
normal: {
width: 3,
color: "#ff6600",
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1, [{
offset: 0,
color: "#ff6600",
}, {
offset: 0.8,
color: "#ff9900",
}, ],
false
),
},
},
// Y Data displayed on the axis , Temperature data
data: this.yData,
}, ],
};
// Call this method to set echarts data
this.chart.setOption(this.chartOptions);
},
// Switch months
changeMonth(month, index) {
this.monthName = month;
this.monthNumber = index;
this.yData = this.data[index][month];
this.xData = [...this.yData.map((e, i) => i + 1)];
// If you switch to the current month , take type Status reset below
if (index === this.nowMonth) {
this.type = 1
}
this.initChart()
},
// Switch to the future 7 Day and month
clickType(e) {
switch (e.target.id) {
case "seven":
this.type = 0;
// Deconstruction assignment update x,y Axis data
[this.xData, this.yData] = this.getSevenData();
break;
case "current":
this.type = 1
this.yData = this.data[this.monthNumber][this.monthName]
this.xData = [...this.yData.map((e, i) => i + 1)]
break;
}
this.initChart();
},
// Get data for the next seven days
getSevenData() {
let newXdata = [],
newYdata = [];
// Use the cycle to get day by day
for (let i = 0; i < 7; i++) {
// current time
let now = new Date();
// now.getTime() For the current timestamp time Time stamp of the day to be obtained
let time = now.getTime() + 1000 * 60 * 60 * 24 * i;
// use setTime transformation , take now Convert to the time of the day you need to get
// now.setTime(time) Both settings now The date of is ： from 1970.1.1 Start walking time Date in milliseconds
now.setTime(time);
newXdata.push(`${
now.getMonth() + 1}/${
now.getDate()}`)
if (this.monthNumber === now.getMonth()) {
// If the currently selected month is the same as the month in which the time of the day is obtained , Then directly take the current y Data in the axis
newYdata.push(this.yData[now.getDate() - 1])
} else {
// If the currently selected month is different from the month in which the time of the day is obtained , It means that it is next month , Take down the data of January
let nextMonth = this.data[now.getMonth()];
// Because of the uncertainty in the monthly data key What is it , You can't take it directly , So using for in Traverse the object to get data indirectly
for (const key in nextMonth) {
newYdata.push(nextMonth[key][now.getDate() - 1])
}
}
}
return [newXdata, newYdata]
}
},
});
</script>
9、JSON generator (25 branch )
I really won't ...
Ask the boss for answers online
10、 Mall management system (25 branch )
// menuList Sample data only , Non actual use data , The level of data actually used is uncertain （ It may be level 4, level 5, level 6, etc ）, Data structure and menuList Agreement
// 1. `parentId` If `-1`, It means that this data is top-level data .
// 2. `parentId` For the parent data of this data `id`.
let menuList = [
{
parentId: -1, name: " Add Administrator ", id: 10, auth: "admin" },
{
parentId: 10, name: " Administrator permission assignment ", id: 11, auth: "admin-auth" },
{
parentId: -1, name: " Commodity management ", id: 1, auth: "product" },
// { parentId: 6, name: " The speed of the red gate network assassination is still waiting to be said ", id: 12, auth: "product" },
{
parentId: 1, name: " List of goods ", id: 4, auth: "productList" },
{
parentId: 4, name: " Classification of goods ", id: 5, auth: "category" },
{
parentId: 5, name: " Add categories ", id: 8, auth: "addClassification" },
{
parentId: 4, name: " Goods shelves ", id: 6, auth: "product" },
{
parentId: -1, name: " Comment management ", id: 2, auth: "comments" },
{
parentId: -1, name: " Personal center ", id: 3, auth: "profile" },
];
/** * @param {*} menuList Incoming data * @return {*} menus Transformed tree structure data ,auths The converted permission list array */
const getMenuListAndAuth = (menuList) => {
// TODO： Code to be supplemented
let menus = [],
auths = [],
// emenus Store those who haven't found their superiors （ Not by push The item ）
emenus = [],
// Whether the item is left （ Whether it has not been push）
isDiscard = true;
// Create a recursive search push Function of
function addChildren(fat, chil) {
fat.forEach((fatItem) => {
if (fatItem.id === chil.parentId) {
fatItem.children.push(chil);
// As long as the item is push 了 , It means it hasn't been left , Modify... Immediately isDiscard
isDiscard = false;
return;
} else {
// recursive
addChildren(fatItem.children, chil);
}
});
}
// Traverse the original data
menuList.forEach((item) => {
// Every time you traverse the data, it defaults in advance isDiscard by true, Because the data has not been push
isDiscard = true;
item.children = [];
auths.push(item.auth);
if (item.parentId === -1) {
menus.push(item);
isDiscard = false;
} else {
addChildren(menus, item);
// A traverse is over , If isDiscard Also for true, That is, it has not been push
// It indicates that the parent of this item has not yet appeared , To prevent this item from being lost , Save it temporarily to emenus in
if (isDiscard) {
emenus.push(item);
}
}
});
// The conversion process is over , If emenus Not empty , It means that some items have been discarded
// The reason why the item was left is ： Its parent appears later than it , When the sequence traverses it , Because there is no parent in front of it , It cannot be received
if (emenus.length !== 0) {
// At this time, all other items have been added menus, At this point again emenus The left item in menus You can definitely add
emenus.forEach((item) => {
addChildren(menus, item);
});
}
return {
menus, auths }; // menus Transformed tree structure data ,auths The converted permission list array
};
// Do not delete or modify the following code
try {
module.exports = {
getMenuListAndAuth };
} catch (e) {
}
Sum up the experience
If the previous provincial race was a flood , This national competition is a real dry field , It doesn't contain any water （ I felt like this when I took the exam ）, I still remember that when the exam just started, I saw that the first question had to be sorted first , I immediately thought of the array prototype with its own sorting method , But ironically, I forgot which one it was ,log Print the Array.prototype, Then I'll try whichever looks like it , But at last, half an hour has passed , I'm in a hurry , Have to use bubble sort this stupid but very simple method , So I was thinking api Too much time has been wasted on , The reason is that my foundation is not strong enough .
Because the provincial race is too much , Before the exam, I always felt that maybe the national game was just like that , I'm not in a hurry during the exam , Do it slowly , There is a good way to achieve it, but I can't remember it for a moment api I won't skip , I've been thinking about it , But time just drags on and drags on , When I really realized that there was not enough time , When it can't be delayed anymore , It's late .
Ah , Now I go back and do the problem again , I found that the time I spent writing the last question was not as long as the time I wasted on the first question during the exam , Because the last time is not enough , I didn't read the last question at all , It's ironic .
Thank you for the experience of this blue bridge Cup , Let me really realize my shortcomings and the direction of my efforts .
I would like to record this failed experience with this article
边栏推荐
- JVM内存模型
- 由浅入深学会白盒测试用例设计
- DS Transunet：用于医学图像分割的双Swin-Transformer U-Net
- 强大、好用、适合程序员/软件开发者的专业编辑器/笔记软件综合评测和全面推荐
- Mo Tianlun salon | Tsinghua qiaojialin: Apache iotdb, originated from Tsinghua, builds an open source ecological road
- Solve the problem of slow or failed vscode download
- Oracle物理体系结构
- 优质笔记软件综合评测和详细盘点（一） Notion、Obsidian、RemNote、FlowUs
- Wechat applet realizes keyword highlighting
- Win11暂停更新点不了怎么办？Win11暂停更新是灰色的如何解决？
猜你喜欢
Image acquisition and playback of coaxpress high speed camera based on pxie interface
HLS4ML进入方法
振弦采集模塊測量振弦傳感器的流程步驟
独家消息：阿里云悄然推出RPA云电脑，已与多家RPA厂商开放合作
Process steps of vibrating wire acquisition module for measuring vibrating wire sensor
Review the collection container again
windows环境 redis安装和启动（后台启动）
math_利用微分算近似值
面试题篇一
fastDFS入门
随机推荐
Interview questions shared in today's group
Servlet knowledge points
类加载机制
JVM内存模型
振弦采集模塊測量振弦傳感器的流程步驟
墨天轮沙龙 | 清华乔嘉林：Apache IoTDB，源于清华，建设开源生态之路
对金额进行求和
Hls4ml entry method
使用 Kibana Timelion 进行时间序列分析
ORA-01950
Oracle physical architecture
SQL getting started plan-1-select
Unreal Engine packaging project
Mo Tianlun salon | Tsinghua qiaojialin: Apache iotdb, originated from Tsinghua, builds an open source ecological road
Define dichotomy lookup
js三元表达式复杂条件判断
Regular expression =regex=regular expression
HLS4ML进入方法
The large list set is divided into multiple small list sets in equal proportion
JS的Proxy