Solutions to the 13th Blue Bridge Cup web university group
During this period of time, some friends are asking if there is any good website for brushing questions.
Here I recommend a website for brushing questions. Click to visit Niuke.com
. , from the basics to the elevation, come and experience it!
1. Fruit platter
/* TODO：待补充代码 */
#pond {
flex-direction: column;
flex-wrap: wrap;
/* display: flex; */
}
The first question is to send sub-questions, the attributes in the simple flex layout.
The test points of this question:flex布局属性
2. Unfold your fan
/*TODO：请补充 CSS 代码*/
#box:hover>#item1 {
transform: rotate(-60deg);
}
#box:hover>#item2 {
transform: rotate(-50deg);
}
#box:hover>#item3 {
transform: rotate(-40deg);
}
#box:hover>#item4 {
transform: rotate(-30deg);
}
#box:hover>#item5 {
transform: rotate(-20deg);
}
#box:hover>#item6 {
transform: rotate(-10deg);
}
#box:hover>#item7 {
transform: rotate(10deg);
}
#box:hover>#item8 {
transform: rotate(20deg);
}
#box:hover>#item9 {
transform: rotate(30deg);
}
#box:hover>#item10 {
transform: rotate(40deg);
}
#box:hover>#item11 {
transform: rotate(50deg);
}
#box:hover>#item12 {
transform: rotate(60deg);
}
This question is actually a sub-question. Unfortunately, my css did not review the rotation, and I forgot the rotate attribute, and the unit of the rotation angle is
deg, which caused this question to be given in vain. It is uncomfortable, alas! ! !
The test point of this question: the attributetransforminrotate, this question is very simple
3. Time spent with mobile phone
/*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);
The third question is actually not difficult, as long as you have learned the basic attributes of echarts, you can solve this question. You only need to exchange the attributes in xAxis and yAxis to achieve the effect!
The test points of this question:echartsthe relevant attributes of
4. The color of the lamp changes
// TODO：完善此函数 显示红色颜色的灯
function red() {
// console.log(123);
document.querySelector('#defaultlight').style.display = 'none'
document.querySelector('#redlight').style.display = 'inline-block'
}
// TODO：完善此函数 显示绿色颜色的灯
function green() {
document.querySelector('#defaultlight').style.display = 'none'
document.querySelector('#redlight').style.display = 'none'
document.querySelector('#greenlight').style.display = 'inline-block'
}
// TODO：完善此函数
function trafficlights() {
setInterval(function(){
red()
setInterval(function(){
green()
},3000)
},3000)
}
trafficlights();
This question is actually not very difficult. According to the requirements in the question, the encapsulation function mainly uses timers and js to operate dom. The
setInterval() method can call functions or calculate expressions according to the specified period (in milliseconds).
The test points of this question:setInterval()the use of methods, and the use ofjsoperating dom
5. East Olympic lottery draw
// TODO：请完善此函数
function rolling() {
time++; // 转动次数加1
clearTimeout(rollTime);
rollTime = setTimeout(() => {
window.requestAnimationFrame(rolling); // 进行递归动画
}, speed);
// 当前li
let liClass = '.li' + (time <= 8 ? time % 9 :(time - 1) % 8 + 1)
// 清除所有的li的active
$('li').removeClass('active')
// 添加当前li
$(liClass).addClass('active')
//获取当前li的文本
let text = $(liClass).text()
// time > times 转动停止
if (time > times) {
clearInterval(rollTime);
$("#award").text(`恭喜你中奖${
text}!!`);
time = 0;
return;
}
}
This question refers to the problem-solving ideas of a big guy. The focus of this question is to find out the current li. I used traversal to do it in the exam, but I didn’t make it. I think there is a problem with the current li acquisition. The test point of this
question , usejquerythe implementation function to modify the style class name, and flexibly obtain the current small li
6. Blue Bridge Knowledge Network
This question is a layout question. There are many ways to achieve the effect. I won’t show you the code here. I used the flex layout in the exam.
7. Layout switching
Render page code:
<div id="app" v-cloak>
<!-- TODO：请在下面实现需求 -->
<div class="bar">
<a :class=" isActive ? 'grid-icon active' : 'grid-icon' " @click="one"></a>
<a :class="isActive ? 'list-icon' : 'list-icon active'" @click="two"></a>
</div>
<ul v-for="(item,index) in goodsList" :key="index" :class="isActive ? 'grid' : 'list'">
<li>
<a href="#/3814" target="_blank">
<img :src="item.image.large" alt="">
</a>
<p v-if="!isActive">{
{
item.title}}</p>
</li>
</ul>
</div>
Function implementation code:
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
isActive: true,
goodsList: [],
},
mounted() {
// TODO：补全代码实现需求
axios.get('./goodsList.json').then(res=>{
this.goodsList = res.data
console.log(this.goodsList);
})
},
methods: {
one() {
this.isActive = true
},
two() {
this.isActive = false
}
}
});
</script>
This question is mainly to investigate some methods of manipulating dom in vue, such as dynamic class, and vue-axios to obtain data for rendering, as long as you think more about this question, you can make it. The test point of this question:
invueuse Some common instructions to realize the function
8. Shopping cart
addToCart(goods){
// TODO：修改当前函数，实现购物车加入商品需求
let index = this.cartList.findIndex(item => item.name == goods.name)
if(index == -1) {
goods.num = 1;
this.cartList.push(goods);
}
else {
this.cartList[index].num +=1
}
this.cartList = JSON.parse(JSON.stringify(this.cartList));
},
removeGoods(goods){
// TODO：补全代码实现需求
let index = this.cartList.findIndex(item => item.name == goods.name)
if(this.cartList[index].num>1) {
this.cartList[index].num--
}
else {
this.cartList.splice(index,1)
}
this.cartList = JSON.parse(JSON.stringify(this.cartList));
}
This question is full of tears. I did this question for almost an hour and didn’t get it out. As a result, I didn’t have time to read the last two questions. I made a very big mistake in doing the question, that is, I used indexOf () to judge goods, the result is that it cannot solve the problem of new duplicate products appearing after clicking the shopping cart, which directly leads to the failure of this question. The test point of this question: use the array method
in es6findIndex()to do a similarfilter()The filter returns the index of the corresponding object found according to the condition, and then performs related operations according to the index
9. Find the Werewolf
// 返回条件为真的新数组
Array.prototype.myarray = function (cb) {
// TODO：待补充代码
const arr = Object.create(this)
const filterArr = [] // 没有符合条件的返回空数组
for (let i = 0; i < arr.length; i++) {
const res = cb(arr[i])
if (res) {
filterArr.push(arr[i])
}
}
return filterArr
};
This question is to ask candidates to write a filter function by hand. If you want to write it, you must understand the
filter()implementation principle. Many bloggers have released the original source code of the handwritten filter() function. It is very worth learning. Look at it (mainly because the time is delayed), but from this question, we can see some functions encapsulated in js, we must figure out the principle of its implementation. The test
point of this question: write afilter()
10. Course List
let pageNum = 1; // 当前页码，默认页码1
let maxPage; // 最大页数
let list = []
// TODO：待补充代码
let nameDom = document.querySelectorAll('.mb-1')[0]
let descriptionDom = document.querySelectorAll('.mb-1')[1]
let priceDom = document.querySelector('small')
let paginationDom = document.querySelector('#pagination')
let data;
function changeText(obj) {
nameDom.innerText = obj.name
descriptionDom.innerText = obj.description
priceDom.innerText = obj.price + '元'
paginationDom.innerHTML = `共 ${
maxPage} 页，当前第 ${
pageNum} 页`
}
axios.get('./js/carlist.json').then(res => {
maxPage = res.data.length
data = res.data
if(maxPage) {
changeText(res.data[0])
}
paginationDom.innerHTML = `共 ${
maxPage} 页，当前第 ${
pageNum} 页`
})
// 点击上一页
let prev = document.getElementById("prev");
prev.onclick = function () {
// TODO：待补充代码
console.log(pageNum);
if(pageNum <= 1) {
prev.className = 'page-item disabled'
return
}
pageNum--
if(pageNum < maxPage) {
next.classList.remove('disabled')
}
changeText(data[pageNum - 1])
};
// 点击下一页
let next = document.getElementById("next");
next.onclick = function () {
// TODO：待补充代码
console.log(pageNum);
if(pageNum >= maxPage) {
next.className = 'page-item disabled'
return
}
pageNum++
if(pageNum > 1) {
prev.classList.remove('disabled')
}
changeText(data[pageNum - 1])
};
This question read the code of a big guy. This question is about using native js and axios to realize the paging function. It should be difficult. Since the use of vue+elementui to develop projects, most of them are encapsulated paging, and It is a warning that we must understand the principle of native implementation.
The test point of this question: native js implementation分页功能
Summary of the Blue Bridge:
- This exam made me understand that front-end engineers must have the ability to develop natively, and your logic processing ability must have a high level
- The inspection points of the Blue Bridge Cup focus on the original and the basics. After passing the exam, I also realized that my native processing ability has a big flaw. In the future study, I must spare time every day to write a small demo with native
- I still lack the ability to think independently, and I don’t need to seriously review the questions, which leads to a series of mistakes
- On the whole, there is still a big gap in my own knowledge reserve, and I still need to study slowly and seriously. What I have learned should be reviewed frequently, thought more, and explored more.