01 水果拼盘
题目:
题解:
本题使用 flex 布局可以快速完成,使用 flex-direction 属性将主轴方向改为 y 轴,然后使用 flex-wrap 属性使元素换行
#pond {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
02 展开你的扇子
题目
题解
本题主要考察 css3 transform
属性,使用rotate
规定元素旋转角度,单位为deg
,值为负时为逆时针旋转
#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);
}
#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);
}
03 和手机相处的时光
题目
题解
这一题主要考察 echarts 配置中的坐标轴配置
属性 | 说明 | 适用对象 |
---|---|---|
value | 数值轴 | 适用于连续数据 |
category | 类目轴 | 适用于离散的类目数据 |
time | 时间轴 | 适用于连续的时序数据 |
log | 对数轴 | 适用于对数数据 |
xAxis: {
type: "category",
},
yAxis: {
type: "value",
},
04 灯的颜色变化
题目
题解
通过修改元素 display 属性控制显示和隐藏,然后设置计时器控制时间。
// TODO:完善此函数 显示红色颜色的灯
function red() {
let redlight = document.querySelector("#redlight");
let defaultlight = document.querySelector("#defaultlight");
redlight.style.display = "inline-block";
defaultlight.style.display = "none";
}
// TODO:完善此函数 显示绿色颜色的灯
function green() {
let redlight = document.querySelector("#redlight");
let greenlight = document.querySelector("#greenlight");
redlight.style.display = "none";
greenlight.style.display = "inline-block";
}
// TODO:完善此函数
function trafficlights() {
setTimeout(() => {
red();
}, 3000);
setTimeout(() => {
green();
}, 6000);
}
trafficlights();
05 冬奥大抽奖
题目
题解
思路:
- 一共有 8 个转盘,所以用转动次数%8 就可以得到当前的元素索引
- 当转动次数为 8 的整数倍时,设置元素索引为 8
- 用字符串拼接方式获取当前元素的类名
let classname = `.li${time % 8}`;
if (time % 8 === 0) {
classname = ".li8";
}
- 给当前元素添加类名 active,其余兄弟节点移除类名 active
$(`${className}`).addClass("active").siblings().removeClass("active");
- 转动停止后根据 active 类名获取对应的 li 元素,取其文本值赋值给#award 元素。
let text = $(`.active`).text();
$("#award").text(`恭喜您抽中了${text}!!!`);
完整代码:
let rollTime; // 定义定时器变量用来清除定时器
let time = 0; // 转动次数
let speed = 300; // 转动时间间隔
let times; // 总转动次数
// 开始按钮点击事件后开始抽奖
$("#start").on("click", function () {
$("#award").text(""); //清空中奖信息
times = parseInt(Math.random() * (20 - 30 + 1) + 20, 10); // 定义总转动次数,随机20-30次
rolling();
});
// TODO:请完善此函数
function rolling() {
time++; // 转动次数加1
clearTimeout(rollTime);
rollTime = setTimeout(() => {
window.requestAnimationFrame(rolling); // 进行递归动画
let classname = `.li${time % 8}`;
if (time % 8 === 0) {
classname = ".li8";
}
$(`${classname}`).addClass("active").siblings().removeClass("active");
}, speed);
// time > times 转动停止
if (time > times) {
let text = $(`.active`).text();
$("#award").text(`恭喜您抽中了${text}!!!`);
clearInterval(rollTime);
time = 0;
return;
}
}
06 蓝桥知识网
题目
题解
本题主要考察 html 和 css 布局
可将页面分为 4 部分,分别为 header、banner、content、footer
可以使用 flex 布局以及 grid 布局快速完成页面设计
代码:
<!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 class="top">
<header>
<div class="headerTitle">蓝桥知识网</div>
<ul class="nav">
<li>首页</li>
<li>热门技术</li>
<li>使用手册</li>
<li>知识库</li>
<li>练习题</li>
<li>联系我们</li>
<li>更多</li>
</ul>
</header>
<div class="banner">
<div class="bannerTitle">蓝桥云课</div>
<div class="bannerText">随时随地丰富你的技术栈!</div>
<div class="join">加入我们</div>
</div>
</div>
<div class="content">
<div class="list">
<div class="listTitle">人工智能</div>
<div class="listText">
人工智能亦称智械、机器智能,指由人制造出来的机器所表现出来的智能。通常人工智能是指通过普通计算机程序来呈现人类智能的技术。
</div>
</div>
<div class="list">
<div class="listTitle">前端开发</div>
<div class="listText">
前端开发是创建 WEB 页面或 APP 等前端界面呈现给用户的过程,通过
HTML,CSS 及 JavaScript
以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互。
</div>
</div>
<div class="list">
<div class="listTitle">后端开发</div>
<div class="listText">
后端开发是实现页面的交互逻辑,通过使用后端语言来实现页面的操作功能,例如登录、注册等。
</div>
</div>
<div class="list">
<div class="listTitle">信息安全</div>
<div class="listText">
ISO(国际标准化组织)的定义为:为数据处理系统建立和采用的技术、管理上的安全保护,为的是保护计算机硬件、软件、数据不因偶然和恶意的原因而遭到破坏、更改和泄露。
</div>
</div>
</div>
<footer>
<div>© 蓝桥云课 2022</div>
<div>京公网安备 11010102005690 号 | 京 ICP 备 2021029920 号</div>
</footer>
</body>
</html>
/*
TODO:请补充代码
*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
align-items: center;
}
.top {
width: 100%;
background-color: #a6b1e1;
display: flex;
flex-direction: column;
align-items: center;
}
header {
padding-top: 13px;
width: 1024px;
height: 46px;
display: flex;
justify-content: space-between;
}
.headerTitle {
font-size: 18px;
color: white;
}
.nav {
display: flex;
font-size: 16px;
color: white;
}
.nav li {
list-style: none;
margin-right: 16px;
}
.banner {
margin-top: 13px;
width: 1024px;
height: 427px;
display: flex;
flex-direction: column;
align-items: center;
}
.bannerTitle {
margin-top: 30px;
font-size: 45px;
color: black;
}
.bannerText {
margin-top: 62px;
color: white;
font-size: 21px;
font-weight: 200;
}
.join {
margin-top: 36px;
color: #efbfbf;
border-radius: 2px;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
padding: 15px;
box-shadow: inset 0 0 0 2px #efbfbf;
}
.content {
margin-top: 74px;
width: 1024px;
height: 302px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
column-gap: 20px;
}
.list {
height: 144px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.listTitle {
font-size: 30px;
font-weight: 200;
color: black;
}
.listText {
font-size: 18px;
color: #aaa;
line-height: 1.4em;
}
footer {
width: 1024px;
height: 80px;
display: flex;
flex-direction: column;
align-items: center;
font-size: 14px;
color: #aaa;
}
footer div:nth-child(1) {
margin-top: 30px;
}
footer div:nth-child(2) {
margin-top: 10px;
}
07 布局切换
题目
题解
<!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="{'active':active}" class="grid-icon " @click="grid()"></a>
<a :class="{'active':!active}" class="list-icon" @click="list()"></a>
</div>
<!--grid 示例代码,动态渲染时可删除-->
<ul
:class="active?'grid':'list'"
v-for="item in goodsList"
:key="item.url"
>
<li>
<a :href="item.url" target="_blank">
<img :src="item.image.large"
/></a>
<p v-show="!active">{{item.title}}</p>
</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
goodsList: [],
active: true,
},
mounted() {
// TODO:补全代码实现需求
axios.get("./goodsList.json").then((res) => {
this.goodsList = res.data;
});
},
methods: {
grid() {
this.active = true;
},
list() {
this.active = false;
},
},
});
</script>
08 购物车
题目
题解
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>购物车</title>
<script src="./js/goods.js"></script>
<script type="text/javascript" src="./js/vue.js"></script>
<link href="./css/index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="app">
<!-- 商品列表 -->
<h3>商品列表</h3>
<ul id="goodsList">
<template v-for="goods in goodsList">
<li class="goods-item" :key="goods.id">
<div><img :src="goods.imgUrl" /> </div>
<div>{{goods.name}}</div>
<div>¥ {{goods.price}} </div>
<button @click="addToCart(goods)">加入购物车</button>
</li>
</template>
</ul>
<!-- 购物车 -->
<template v-if="cartList.length>0">
<h3>购物车</h3>
<ul id="cartList">
<template v-for="goods in cartList">
<li class="goods-item" :key="goods.id">
<div><img :src="goods.imgUrl" /> </div>
<div>{{goods.name}}</div>
<div>¥ {{goods.price}} </div>
<div class="item-control">
<button @click="removeGoods(goods)">-</button>
<h4>{{goods.num}}</h4>
<button @click="addToCart(goods)">+</button>
</div>
</li>
</template>
</ul>
</template>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
cartList: [],
goodsList: []
},
mounted() {
this.goodsList = GoodsArr;
},
methods: {
addToCart(goods) {
// TODO:修改当前函数,实现购物车加入商品需求
let itemIndex = this.cartList.findIndex(item => item.id == goods.id);
if (itemIndex !== -1) {
this.cartList[itemIndex].num++
} else {
goods.num = 1;
this.cartList.push(goods);
}
this.cartList = JSON.parse(JSON.stringify(this.cartList));
},
removeGoods(goods) {
// TODO:补全代码实现需求
let itemIndex = this.cartList.findIndex(item => item.id == goods.id);
if (this.cartList[itemIndex].num > 1) {
this.cartList[itemIndex].num--
} else {
this.cartList.splice(itemIndex, 1)
}
}
}
});
</script>
09 寻找小狼人
题目
题解
首先看一下函数是怎么调用的
let newcardList = cardList.myarray((item) => item.category == "werewolf");
可以看到函数参数为一个回调函数,是要满足的判断条件
所以我们只需要遍历数组找到满足条件的数据存入新数组中
接着把新数组返回即可
// 返回条件为真的新数组
Array.prototype.myarray = function (cb) {
// TODO:待补充代码
let result = [];
this.forEach((item) => {
if (cb(item)) {
result.push(item);
}
});
return result;
};
10 课程列表
题目
题解
let pageNum = 1; // 当前页码,默认页码1
let maxPage; // 最大页数
// TODO:待补充代码
let pagination = document.getElementById("pagination");
let list = document.getElementById("list");
let arr = [];
axios.get("./js/carlist.json").then((res) => {
arr = res.data;
//利用ceil向上取整,获取最大页数
maxPage = Math.ceil(res.data.length / 5);
showDom(pageNum);
pagination.textContent = `共${maxPage}页,当前${pageNum}页`;
});
// 将number类型转换成题目给定的货币类型
function fmoney(num) {
if (!num) return NaN;
num = num.toString();
let l = num.split("");
let i = l.length;
l.splice(i - 2, 0, ".");
return l.join("");
}
// 更新DOM的函数
function showDom(index) {
// 深拷贝
let Dom = JSON.parse(JSON.stringify(arr));
// 截取需要展示的5条数据
let newDom = Dom.splice((index - 1) * 5, 5);
list.innerHTML = "";
for (let i = 0; i < newDom.length; i++) {
const element = newDom[i];
list.innerHTML += ` <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>${fmoney(element.price)}元</small>
</div>
<p class="mb-1">
${element.description}
</p>
</a>
</div>`;
}
}
let prev = document.getElementById("prev");
let next = document.getElementById("next");
// 给按钮添加禁用类disabled的函数
function isDisabled() {
if (pageNum === 1) {
prev.classList.add("disabled");
} else {
prev.classList.remove("disabled");
}
if (pageNum === maxPage) {
next.classList.add("disabled");
} else {
next.classList.remove("disabled");
}
}
isDisabled();
// 点击上一页
prev.onclick = function () {
// TODO:待补充代码
if (pageNum > 1) {
pageNum--;
showDom(pageNum);
}
isDisabled();
pagination.textContent = `共${maxPage}页,当前${pageNum}页`;
};
// 点击下一页
next.onclick = function () {
// TODO:待补充代码
if (pageNum !== maxPage) {
pageNum++;
showDom(pageNum);
}
isDisabled();
pagination.textContent = `共${maxPage}页,当前${pageNum}页`;
};
完整题目 :
https://gitee.com/Raindropp/lanqiao-topic
完整题解 :
https://gitee.com/Raindropp/lanqiao-answer
Q.E.D.