22省赛
1 购物车¶
https://www.lanqiao.cn/problems/2455/learning/
methods:{
// 注意两个goods不同
// addToCart中，可能是goodsList里面的，也可能是cartList里面的
// removeGoods中，肯定是cartList里面的
addToCart(goods){
let cartGoods=this.cartList.find(item=>item.id==goods.id)
if(!cartGoods) {
let item=Object.assign(goods)
item.num = 1;
this.cartList.push(item);
}else{
cartGoods.num++
}
// 触发响应式
this.cartList = JSON.parse(JSON.stringify(this.cartList));
},
removeGoods(goods){
goods.num--
if(goods.num===0){
this.cartList.splice(this.cartList.indexOf(goods))
}
}
}
vue2需要使用this.cartList = JSON.parse(JSON.stringify(this.cartList));触发响应式
<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>
<script>
new Vue({
el: '#app',
data: {
cartList: [],
goodsList: []
},
mounted() {
this.goodsList = GoodsArr;
},
methods: {
addToCart(goods) {
// TODO：修改当前函数，实现购物车加入商品需求
// console.log("goods",goods);
let flag = true;
this.cartList.forEach(item => {
if (item.id === goods.id) {
// 特殊情况，有两个地方会调用此方法，传进来的goods不同
// 在'商品列表'中点击，也会触发这个方法
// 但商品列表中的goods来自goodsList
// 永远是一个初始值
// 建议把这个goods当做一个用来查找的标签，主体还得是this.cartList
// 但下面的减就不一样，因为传进来的一定是this.cartList
goods.num += 1;
item.num += 1;
console.log(goods, item);
flag = !flag;
}
});
if (flag) {
goods.num = 1;
this.cartList.push(goods);
//深拷贝
this.cartList = JSON.parse(JSON.stringify(this.cartList));
// console.log(this.cartList);
}
},
removeGoods(goods) {
// TODO：补全代码实现需求
if (goods.num === 1) {
this.cartList.splice(this.cartList.indexOf(goods), 1);
}
else {
goods.num--;
}
}
}
});
</script>
axios('carList.json').then((res)=>{
this.carlist=res.data
console.log(carlist);
})
draw() {
let string = "";
this.$refs.box.innerHTML = "";
console.log(this.$refs.box);
this.carlist.map((item) => {
string += `<el-card class="box-card">
<!-- 商品图片 -->
<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>`;
});
this.$refs.box.innerHTML = string;
},
2 水果拼盘¶
#pond {
flex-flow:column wrap;
}
3 展开你的扇子¶
/*TODO：请补充 CSS 代码*/
#box:hover #item12{
transition: all 1s;
transform: rotate(60deg);
}
#box:hover #item11{
transition: all 1s;
transform: rotate(50deg);
}
#box:hover #item10{
transition: all 1s;
transform: rotate(40deg);
}
#box:hover #item9{
transition: all 1s;
transform: rotate(30deg);
}
#box:hover #item8{
transition: all 1s;
transform: rotate(20deg);
}
#box:hover #item7{
transition: all 1s;
transform: rotate(10deg);
}
#box:hover #item6{
transition: all 1s;
transform: rotate(-10deg);
}
#box:hover #item5{
transition: all 1s;
transform: rotate(-20deg);
}
#box:hover #item4{
transition: all 1s;
transform: rotate(-30deg);
}
#box:hover #item3{
transition: all 1s;
transform: rotate(-40deg);
}
#box:hover #item2{
transition: all 1s;
transform: rotate(-50deg);
}
#box:hover #item1{
transition: all 1s;
transform: rotate(-60deg);
}
transform: rotate(-60deg)旋转，需要和transition: all 1s搭配使用
4 和手机相处的时光¶
xAxis: {
type: "category",
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
},
yAxis: {
type: "value",
},
5 灯的颜色变化¶
// TODO：完善此函数 显示红色颜色的灯
function red() {
setTimeout(() => {
document.querySelector("#defaultlight").style.display = "none";
document.querySelector("#redlight").style.display = "inline-block";
}, 3000);
}
// TODO：完善此函数 显示绿色颜色的灯
function green() {
setTimeout(() => {
document.querySelector("#redlight").style.display = "none";
document.querySelector("#greenlight").style.display = "inline-block";
}, 6000);
}
// TODO：完善此函数
function trafficlights() {
red();
green();
}
6 冬奥大抽奖¶
function rolling() {
time++; // 转动次数加1
clearTimeout(rollTime);
rollTime = setTimeout(() => {
window.requestAnimationFrame(rolling); // 进行递归动画
}, speed);
let active = document.querySelector(".active");
if (!active) {
document.querySelector(".li1").classList.add("active");
}else{
active.classList.remove("active");
let next=parseInt(active.className[2])+1
if(next==9)next=1
document.querySelector(`.li${next}`).classList.add('active')
}
// time > times 转动停止
if (time > times) {
clearInterval(rollTime);
document.querySelector('#award').innerText =document.querySelector('.active').innerText
time = 0;
return;
}
}
- dom的class API：
dom.classList.add没有.styledom.classList.removedom.classList.adddom.className字符串
7 蓝桥知识网¶
<!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：请补充代码-->
<section class="first">
<div class="container">
<div class="nav">
<div>蓝桥知识网</div>
<div class="subnav">
<div>首页</div>
<div>热门技术</div>
<div>使用手册</div>
<div>知识库</div>
<div>练习题</div>
<div>联系我们</div>
<div>更多</div>
</div>
</div>
<div class="title">
<div id="bigTitle">蓝桥云课</div>
<div id="subTitle">随时随地丰富你的技术栈！</div>
<div id="join">加入我们</div>
</div>
</div>
</section>
<section class="second">
<div class="container">
<div class="content">
<div>
<div>人工智能</div>
<span
>人工智能亦称智械、机器智能，指由人制造出来的机器所表现出来的智能。通常人工智能是指通过普通计算机程序来呈现人类智能的技术。</span
>
</div>
<div>
<div>前端开发</div>
<span
>前端开发是创建 WEB 页面或 APP 等前端界面呈现给用户的过程，通过
HTML，CSS 及 JavaScript
以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。
</span>
</div>
<div>
<div>后端开发</div>
<span
>后端开发是实现页面的交互逻辑，通过使用后端语言来实现页面的操作功能，例如登录、注册等。</span
>
</div>
<div>
<div>信息安全</div>
<span
>ISO（国际标准化组织）的定义为：为数据处理系统建立和采用的技术、管理上的安全保护，为的是保护计算机硬件、软件、数据不因偶然和恶意的原因而遭到破坏、更改和泄露。
</span>
</div>
</div>
</div>
</section>
<hr />
<div>
<div class="container">
<div class="bottom">
<div class="logo">© 蓝桥云课 2022</div>
<div class="beian">
京公网安备 11010102005690 号 | 京 ICP 备 2021029920 号
</div>
</div>
</div>
</div>
</body>
</html>
/*
TODO：请补充代码
*/
* {
margin: 0;
padding: 0;
}
.container {
margin: 0 auto;
width: 1024px;
}
.first {
background-color: #a6b1e1;
height: 486px;
}
.nav {
/* padding-top: 13px; */
height: 46px;
display: flex;
justify-content: space-between;
color: white;
line-height: 59px;
font-size: 18px;
}
.nav div {
padding: 0 15px;
}
.subnav {
display: flex;
}
.subnav div {
padding: 0 8px;
font-size: 16px;
}
#bigTitle {
padding-top: 30px;
font-size: 45px;
}
#subTitle {
color: white;
font-size: 21px;
font-weight: 200;
padding-top: 62px;
}
#join {
margin-top: 36px;
margin-bottom: 200px;
color: #efbfbf;
font-size: 18px;
box-shadow: inset 0 0 0 2px #efbfbf;
border-radius: 2px;
padding: 8px;
line-height: 24px;
}
.title {
display: flex;
flex-direction: column;
align-items: center;
}
.content {
margin-top: 74px;
display: grid;
height: 302px;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.content div div {
font-size: 30px;
font-weight: 200;
color: black;
padding-bottom: 8px;
}
.content div span {
font-size: 18px;
color: #aaa;
line-height: 1.4rem;
}
.bottom {
display: flex;
flex-direction: column;
align-items: center;
font-size: 14px;
color: #aaa;
}
.logo {
padding-top: 30px;
}
.beian {
padding-top: 10px;
}
8 布局切换¶
<div id="app" v-cloak>
<!-- TODO：请在下面实现需求 -->
<div class="bar">
<a :class="['grid-icon', {'active':grid}]" @click="grid=true"></a>
<a :class="['list-icon', {'active':!grid}]" @click="grid=false"></a>
</div>
<!--grid 示例代码，动态渲染时可删除-->
<ul class="grid" v-if="grid">
<li v-for="good in goodsList">
<a :href="good.url" target="_blank">
<img :src="good.image.large"
/></a>
</li>
</ul>
<ul class="list" v-if="!grid">
<li v-for="good in goodsList">
<a :href="good.url" target="_blank">
<img :src="good.image.small"
/></a>
<p>从零吃透 Vue.js 框架</p>
</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
goodsList: [],
grid: true,
},
mounted() {
// TODO：补全代码实现需求
axios("goodsList.json").then((res) => {
console.log(res.data);
this.goodsList = res.data;
});
},
});
:class="['grid-icon', {'active':grid}]
<body>
<div id="app" v-cloak>
<!-- TODO：请在下面实现需求 -->
<div class="bar">
<a class="grid-icon active" @click="grid"></a>
<a class="list-icon" @click="list"></a>
</div>
<!--grid 示例代码，动态渲染时可删除-->
<ul class="grid" v-if="flag">
<li v-for="(item,index) in goodsList">
<a href="#/3814" target="_blank"> <img :src=item.image.large /></a>
</li>
</ul>
<ul class="list" v-if="!flag">
<li v-for="(item,index) in goodsList">
<a href="#/3814" target="_blank"> <img :src=item.image.small /></a>
<p>{{item.title}}</p>
</li>
</ul>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
goodsList: {,
flag: 1
},
mounted() {
// TODO：补全代码实现需求
axios.get('goodsList.json').then(val => {
this.goodsList = val.data;
})
},
methods: {
grid: function() {
let all = document.querySelectorAll('.bar>a')
let c = document.querySelector('.grid-icon');
for (let i = 0; i < all.length; i++) {
all[i].classList.remove('active')
}
this.flag = 1;
c.classList.add('active');
},
list: function() {
let all = document.querySelectorAll('.bar>a')
let b = document.querySelector('.list-icon');
for (let i = 0; i < all.length; i++) {
all[i].classList.remove('active')
}
this.flag = 0;
b.classList.add('active');
}
}
});
</script>
9. 寻找小狼人¶
// 返回条件为真的新数组
Array.prototype.myarray = function (cb) {
// TODO：待补充代码
let ret = [];
this.forEach((item) => {
if (cb(item))
ret.push(item);
})
return ret;
};
Array.prototype.myarray = function (cb) {
// TODO：待补充代码
let ret = [];
for (let item of this)
if (cb(item))
ret.push(item);
return ret;
};
Array.prototype.myarray = function (cb) {
// TODO：待补充代码
let ret = [];
for (let item in this)
if (cb(this[item]))
ret.push(this[item]);
return ret;
};
Array.prototype.myarray = function (cb) {
return this.reduce((prev, now) => cb(now) ? prev.push(now)&&prev : prev, []);
};
10.课程列表¶
let pageNum = 1; // 当前页码，默认页码1
let maxPage; // 最大页数
let prev = document.getElementById("prev");
let next = document.getElementById("next");
// TODO：待补充代码
let update = async function (pageNum) {
let result = await axios.get("js/carlist.json");
let Data = result.data;
maxPage = Math.ceil(Data.length / 5);
if (pageNum === 1) {
prev.className = "page-item disabled"
}
else if (pageNum === maxPage) {
next.className = "page-item disabled"
}
else {
prev.className = "page-item"
next.className = "page-item"
}
let pag = document.querySelector('#pagination');
pag.innerHTML = `共${maxPage}页，当前${pageNum}页`;
let group = document.querySelector('.list-group');
group.innerHTML = ``;
for (let i = 0; i < 5; i++) {
let item = Data[pageNum * 5 + i - 5];
group.innerHTML += `
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">${item.name}</h5>
<small>${item.price / 100}.${item.price % 100}元</small>
</div>
<p class="mb-1">${item.description}</p>
</a>`
}
}
update(1);
prev.onclick = function () {
if(pageNum>1){
pageNum--;
update(pageNum);
}
};
next.onclick = function () {
if(pageNum<maxPage){
pageNum++;
update(pageNum);
}
};
我的：
let pageNum = 1; // 当前页码，默认页码1
let maxPage; // 最大页数
let prev = document.getElementById("prev");
const list = document.querySelector("#list");
const pagination=document.querySelector("#pagination")
let cardata = [];
// TODO：待补充代码
const renderData = () => {
start = (pageNum - 1) * 5;
pagination.innerText=`共${maxPage}页，当前${pageNum}页`
document.querySelector('.disabled')?.classList.remove('disabled')
if (pageNum===1) prev.classList.add("disabled");
if (pageNum === maxPage) next.classList.add("disabled");
list.innerHTML = cardata.slice(start, start + 5).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).toFixed(2)}元</small>
</div>
<p class="mb-1">${element.description}</p>
</a>
</div>`),
""
);
};
axios("./js/carlist.json").then((res) => {
cardata = res.data;
maxPage = Math.ceil(cardata.length / 5);
renderData();
});
// 点击上一页
prev.onclick = function () {
if(pageNum===1) return
pageNum -= 1;
renderData();
};
// 点击下一页
let next = document.getElementById("next");
next.onclick = function () {
if(pageNum==maxPage)return
pageNum += 1;
renderData();
};
num.toFixed(2)
7 健身大调查¶
https://www.lanqiao.cn/problems/7325/learning
function formSubmit() {
// TODO：待补充代码
const form = document.querySelector("#myForm");
let height = form[0].value;
let weight = form[1].value;
let gender = form[2].checked ? 0 : 1;
let place = [];
for (let i = 4; i <= 6; i++) {
if (form[i].checked) {
switch (i) {
case 4:
place.push("公园");
break;
case 5:
place.push("健身房");
break;
case 6:
place.push("户外");
break;
}
}
}
console.log([document.querySelector('[type="radio"]:checked')]);
document.querySelector("#quescontent").style.display = "none";
const result = document.querySelector("#result");
result.innerText = `身高 ${height}cm，体重 ${weight}kg，性别${
gender ? "女" : "男"
}，会在${place.join("、")}锻炼`;
result.style.display='block'
}
dom.nextSibling可以得到下一个结点，无论是纯文本还是注释节点都可以
8 请到下一步¶
https://www.lanqiao.cn/problems/7326/learning/
/*TODO：请补充代码*/
var current_form, next_form, previous_form; // 表单域
// 点击下一页的按钮
let pres=1;
$(".next").click(function () {
current_form = $(this).parent();
if(pres===3) return
document.querySelector(`#form${pres}`).style.display='none'
pres++
document.querySelector(`#form${pres}`).style.display='block'
document.querySelectorAll(`#progressbar li`)[pres-1].classList.add('active')
});
// 点击返回按钮
$(".previous").click(function () {
if(pres===1) return
document.querySelector(`#form${pres}`).style.display='none'
pres--
document.querySelector(`#form${pres}`).style.display='block'
document.querySelectorAll(`#progressbar li`)[pres].classList.remove('active')
});
// 点击提交按钮
$(".submit").click(function () {
alert("提交成功");
});
9 谁最长¶
/**
* 封装函数，传入任意数量的数组，返回长度最大的数组集合
*/
const getMaxArrays = (...arrays) => {
console.log(arrays);
if (arrays.length === 0) return [];
if (!arrays.every((item) => Array.isArray(item))) return [];
let sameLength = arrays[0].length;
if (arrays.every((item) => item.length === sameLength)) return [];
let maxLength = 0;
let ans = [];
arrays.forEach((item) => {
if (item.length > maxLength) {
maxLength = item.length;
ans = [];
ans.push(item);
}else if(item.length===maxLength){
ans.push(item)
}
});
return ans
};
module.exports = getMaxArrays; //请勿删除
const getMaxArrays = (...arrays) => {
// TODO：待补充代码
//情况2 如果有不是数组的元素返回[]
if(arrays.some(e=>!(e instanceof Array))) return []
//使用过滤器过滤出符合条件的数组
//如果arrays为空不会执行filter不会造成数组下标为-1的情况
// sort按照子数组长度递增排序
let arr = arrays.sort().filter(e=>e.length==arrays[arrays.length-1].length)
//情况1 如果所有长度一样返回[]否则返回筛选出来的数组
return arr.length == arrays.length ? []:arr
};
module.exports = getMaxArrays; //请勿删除
10 输入搜索联想¶
{{col[0].toUpperCase()+ col.slice(1,col.length)}}
watch: {
searchQuery(pres, prev) {
let list = this.data.filter((item) =>
item.name.toLowerCase().includes(pres.toLowerCase())
);
let html =list.reduce((prev, cur) => {
let html = "";
for (let item in cur) {
html += "<td>" + cur[item] + "</td>";
}
return prev + "<tr>" + html + "</tr>";
}, "");
document.querySelector('tbody').innerHTML=html
},
},
或者：
this.data.filter(item => new RegExp(this.searchQuery.trim(),'i').test(item.name))
// 直接写在v-for里面，或者写在computed里面