蓝桥杯Web前端练习
- 1. 【功能实现】折叠手风琴
- 2. 【功能实现】 卡片化标签页
- 3. 【功能实现】新年贺卡
- 4. Flex 经典骰子布局
- 5. 【数据交互】天气预报查询
- 6.知乎首页数据动态化
- 7. RESTful API 开发
- 8.实现卡号绑定功能
- 9.【功能实现】菜单树检索
- 10.【功能实现】购物车
- 11. 【功能实现】时间管理大师
- 12. 【算法实现】小兔子爬楼梯
- 13.【代码改错】学生信息统计
- 14.【算法实现】随机数生成器
1. 【功能实现】折叠手风琴
var lists = $('.option')
// each遍历
$.each(lists,function(index,value){
$(value).click(function(e){
// siblings()遍历出除这个元素以外的所有元素
// 移除除这个元素以外的元素的所有active class
$(this).siblings().removeClass('active')
$(this).addClass('active')
});
});
//方法二
//$('.option').each(function(){
// $(this).click(function(){
// $(this).addClass('active')
// $(this).siblings().removeClass('active')
// })
//})2. 【功能实现】 卡片化标签页
// 实现选项卡功能
function init() {
// TODO 待补充代码
const tabs = document.querySelectorAll('.tabs div')
const content = document.querySelectorAll('#content div')
for (let index = 0; index < tabs.length; index++) {
tabs[index].onclick = function() {
for (let i = 0; i < tabs.length; i++) {
tabs[i].classList.remove('active')
content[i].classList.remove('active')
}
this.classList.add('active')
content[index].classList.add('active')
}
}
}
init();
3. 【功能实现】新年贺卡
document.addEventListener('DOMContentLoaded', function () {
const greetingDisplay = document.getElementById("greeting-display")
const btn = document.getElementById("btn")
// 点击开始书写按钮
btn.addEventListener("click", () => {
show(greetingDisplay)
})
})
const greetings = [
"新年快乐!",
"接受我新春的祝愿,祝你平安幸福",
"祝你新年快乐,洋洋得意!",
"新的一年,新的开始;心的祝福,新的起点!",
"新年好!祝新年心情好,身体好,一切顺心!",
]
// 随机数函数 从 greetings 随机取一个值并返回
function writeGreeting() {
// TODO 带补充代码
// Math.round(n); 返回n四舍五入后整数的值。
// Math.random() [0,1)的随机数
let index =Math.round( Math.random()*4)
return greetings[index]
}
/*
* @param {*} greetingDisplay 要显示内容的dom元素
*/
// show 将 writeGreeting 函数中返回的内容显示在 greetingDisplay 元素中
function show(greetingDisplay) {
// TODO 待补充代码
greetingDisplay.innerHTML=writeGreeting()
}
module.exports = { show, writeGreeting }4. Flex 经典骰子布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>骰子布局</title>
<style>
body {
margin: 10px 0 0 0;
display: flex;
justify-content: space-around;
}
body>div {
display: flex;
width: 100px;
height: 100px;
border-radius: 4px;
border: 2px solid red;
box-sizing: border-box;
}
p {
width: 15px;
height: 15px;
background-color: black;
border-radius: 50%;
margin: 2px;
}
.div1 {
justify-content: center;
align-items: center;
}
/*todo:请补全剩余骰子布局代码*/
.div2 {
justify-content:space-around;
flex-direction: column;
align-items: center;
}
.div3 {
align-items: center;
justify-content: space-around;
}
.div3 p:nth-child(1){
align-self:flex-start;
}
.div3 p:nth-child(3){
align-self:flex-end;
}
.div4 {
justify-content: space-around;
flex-direction: column;
}
.div4 div {
display: flex;
justify-content: space-around;
}
.div5 {
flex-direction: column;
justify-content: space-around;
}
.div5 div {
display: flex;
justify-content: space-around;
}
.div6 {
flex-direction: column;
justify-content: space-around;
}
.div6 div {
display: flex;
justify-content: space-around;
}
.div7 {
flex-direction: column;
justify-content: space-around;
}
.div7 div {
display: flex;
justify-content: space-around;
}
.div8 {
justify-content: space-around;
flex-wrap: wrap;
align-items: center;
}
.div8 div {
flex-basis: 100px;
display: flex;
justify-content: space-between;
}
.div9 {
flex-direction: column;
justify-content: space-around;
}
.div9 div{
justify-content: space-around;
display: flex;
}
</style>
</head>
<body>
<!--骰子1-->
<div class="div1">
<p></p>
</div>
<!--骰子2-->
<div class="div2">
<p></p>
<p></p>
</div>
<!--骰子3-->
<div class="div3">
<p></p>
<p></p>
<p></p>
</div>
<!--骰子4-->
<div class="div4">
<div>
<p></p>
<p></p>
</div>
<div>
<p></p>
<p></p>
</div>
</div>
<!--骰子5-->
<div class="div5">
<div>
<p></p>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
<p></p>
</div>
</div>
<!--骰子6-->
<div class="div6">
<div>
<p></p>
<p></p>
</div>
<div>
<p></p>
<p></p>
</div>
<div>
<p></p>
<p></p>
</div>
</div>
<!--骰子7-->
<div class="div7">
<div>
<p></p>
<p></p>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
<p></p>
<p></p>
</div>
</div>
<!--骰子8-->
<div class="div8">
<div>
<p></p>
<p></p>
<p></p>
</div>
<div>
<p></p>
<p></p>
</div>
<div>
<p></p>
<p></p>
<p></p>
</div>
</div>
<!--骰子9-->
<div class="div9">
<div>
<p></p>
<p></p>
<p></p>
</div>
<div>
<p></p>
<p></p>
<p></p>
</div>
<div>
<p></p>
<p></p>
<p></p>
</div>
</div>
</body>
</html>
5. 【数据交互】天气预报查询
index.js
function getweather() {
//TODO：请补充代码
$.get('js/weather.json',function(data,textStatus){
let item =$('.item')
let img,one,two,three,time
for(let i=0;i<data.result.length;i++){
img=item[i].children[0]
one=item[i].children[1].children[0]
two=item[i].children[1].children[1]
three=item[i].children[1].children[2]
time=item[i].children[1].children[3].children
img.src=data.result[i].weather_icon
one.innerText =data.result[i].weather
two.innerText =data.result[i].temperature
three.innerText =data.result[i].winp
time[0].innerText=data.result[i].days
time[1].innerText=data.result[i].week
}
})
}
getweather();
6.知乎首页数据动态化
注意要引入axios以及axios的使用，以及json文件路径，以及vue2语法
<template>
<div class="list">
<div class="list-item" v-for="(item,index) in list" :key="item+index">
<img
class='list-pic'
:src='item.imgUrl'
/>
<div class="list-info">
<p class='title'>{{item.title}}</p>
<p class='desc'>{{item.desc}}</p>
</div>
</div>
</div>
</template>
<script>
//引入axios
import axios from 'axios'
export default {
data() {
return {
list:[]
};
},
created(){
axios.get('./static/data/list.json').then((res) => {
this.list=res.data.data.listInfo
console.log(this.list);
}
)
}
};
</script>
7. RESTful API 开发
var express = require('express');
var app = express();
var fs = require("fs");
var path =require('path');
app.use(express.json())
app.use(express.urlencoded({ extended: false }))
//添加用户
app.post('/add', function(req, res) {
fs.readFile(path.resolve(__dirname,'./users.json'), 'utf8', function(err, data) {
data = JSON.parse(data);
data["userlist"].push({
"id": 4,
"username": "lucy",
"password": "123456"
});
res.json(data);
});
})
//TODO：请补全获取用户列表代码
app.get('/list', function(req, res) {
fs.readFile(path.resolve(__dirname,'./users.json'), 'utf8', function(err, data) {
data = JSON.parse(data);
res.json(data);
});
})
app.listen(8080, function() {
console.log("访问地址:http://localhost:8080")
})
module.exports = app;
8.实现卡号绑定功能
查看题
//点击绑卡按钮执行的函数
function bind(cardno, password) {
//Todo:补充代码
$.get('js/cardnolist.json').then(res=>{
/**
* some()：用于检测数组中的元素是否满足指定条件（函数提供）
* 如果有一个元素满足条件，则表达式返回true，剩余的元素不会再执行检测。
* 如果没有满足条件的元素，则返回false。
*/
let flag=res.cardnolist.some(item=>item.cardno===cardno&&item.password===password)
if(flag){
$('#tip2').removeClass('show').addClass('fade')
$('#tip1').removeClass('fade').addClass('show')
}else {
$('#tip1').removeClass('show').addClass('fade')
$('#tip2').removeClass('fade').addClass('show')
}
})
}
$(document).ready(function() {
$("#btnsubmit").click(function() {
//卡号
let cardno = $("#exampleInputCardno").val();
//密码
let password = $("#exampleInputPassword").val();
bind(cardno, password);
});
});
9.【功能实现】菜单树检索
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>test</title>
<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<style>
input {
width: 200px;
height: 32px;
padding-left: 5px;
}
/* 法二 */
/* .title {
background-color: yellow;
} */
</style>
</head>
<body>
<!-- 需求：输入待查找的字段，输出包含该字段的所有菜单数据。
1、若该菜单有父级菜单，则返回其父级菜单及同胞菜单。
2、若该菜单有子级菜单，则返回该菜单及其下子级菜单。
3、若该菜单既无父级也无子级，则返回菜单本身即可。
测试字段：查询、首页、管理、配置、维护 -->
<div id="app">
<input type="text" placeholder="请输入要搜索的菜单内容" v-model="title" />
<ul>
<li v-for="(item,index) in list" :key="item.meta.title">
<span :style="{'background-color': item.meta.title.includes(title)&&title!==''?'yellow':''}">{{item.meta.title}}</span>
<ul v-if="item.children">
<li v-for="(cln,indexC) in item.children" :key="cln.meta.title">
<span :style="{'background-color': cln.meta.title.includes(title)&&title!==''?'yellow':''}">{{cln.meta.title}}</span>
</li>
</ul>
</li>
</ul>
</div>
<!-- 法二 -->
<!-- <div id="app">
<input type="text" v-model="value" placeholder="请输入要搜索的菜单内容"/>
<ul>
<li v-for="(item,index) in list" v-if="!item.ishide">
<span :class="{'title':item.meta.title.includes(value)&&value}" >{{item.meta.title}}</span>
<ul v-if="item.children">
<li v-for="(item2,index2) in item.children" >
<span :class="{'title':item2.meta.title.includes(value)&&value}" >{{item2.meta.title}}</span>
</li>
</ul>
</li>
</ul>
</div> -->
</body>
<script type="text/javascript" src="./js/index.js"></script>
</html>
const app = new Vue({
el: "#app",
// 在此处补全代码，实现二级菜单搜索功能
data: {
list: [],
listData: [],
title: ''
},
async created() {
const res = await axios.get('./data.json')
this.listData = res.data
this.list = res.data
},
methods: {
search(n) {
//搜索函数
this.list = []
for (let i = 0; i < this.listData.length; i++) {
if (this.listData[i].meta.title.includes(n)) {
this.list.push(this.listData[i])
} else if (this.listData[i].children) {
const chilData = this.listData[i].children
chil: for (let cli = 0; cli < chilData.length; cli++) {
if (chilData[cli].meta.title.includes(n)) {
this.list.push(this.listData[i])
break chil
}
}
}
}
}
},
watch: {
title: (n, o) => {
app.search(n)
}
}
});
//法二
// const app = new Vue({
// el:"#app",
// // 在此处补全代码，实现二级菜单搜索功能
// data(){
// return {
// list:[],
// value:''
// }
// },
// created(){
// axios.get('./data.json').then(res=>{
// this.list=res.data
// })
// },
// methods:{
// screath(val){
// this.list.forEach(item => {
// //是否隐藏
// item.ishide=true
// if(item.meta.title.includes(val)){
// item.ishide=false
// }
// if(item.children) {
// item.children.forEach(item2=>{
// if(item2.meta.title.includes(val)){
// item.ishide=false
// }
// })
// }
// });
// }
// },
// watch:{
// value(n,o){
// this.screath(n)
// }
// }
// });10.【功能实现】购物车
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>购物车</title>
<script src="./js/vue.js"></script>
<script src="./js/axios.js"></script>
<style>
h4 {
text-align: center;
}
.box-card {
width: 200px;
overflow: hidden;
margin: 0 auto;
}
.box-card img {
width: 100%;
height: auto;
}
.bottom {
margin: 8px 0;
}
</style>
</head>
<body>
<div class="container" id="app">
<h4>购物车</h4>
<!--TODO 购物车列表 -->
<div v-for="item in carlist" :key="item.id">
<div class="box-card">
<!-- 商品图片 img -->
<img :src="item.img">
<div>
<span>
<!-- 商品名称 name -->
{{item.name}}
</span>
<div class="bottom clearfix">
<button type="text" class="button">+</button>
<button type="text" class="button">
<!-- 商品数量 num -->
{{item.num}}
</button>
<button type="text" class="button">-</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 引入组件库 -->
<script>
new Vue({
el: "#app",
data: {
carlist: [] //购物车列表
},
async created() {
//TODO 使用axios 请求购物车列表
const res = await axios.get('./carList.json')
this.carlist = res.data
},
})
</script>
</body>
</html>
11. 【功能实现】时间管理大师
<html>
<head>
<meta charset="utf-8" />
<title>任务管理器</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
</head>
<body>
<div id="box">
<div class="head">
<h2>Todos</h2>
<p>罗列日常计划，做一个时间管理大师！</p>
<div class="input">
<span>内容</span>
<input type="text" placeholder="请输入你要做的事" v-model="text" />
<span id="add" @click="add">确认</span>
</div>
</div>
<ul class="list">
<li v-if="!list.length">暂无数据</li>
<li v-else v-for="(item,index) in list" :key="index">
<!-- 前面的序号 -->
<span class="xh">{{index+1}}</span>
<!-- 列表内容 -->
<span>{{item}}</span>
<!-- 删除按钮 -->
<span class="qc" @click="remove(index)"></span>
</li>
<!-- <li>
<span class="xh">2</span>
<span>吃饭</span>
<span class="qc"></span>
</li>
<li>
<span class="xh">3</span>
<span>睡觉</span>
<span class="qc"></span>
</li> -->
<li v-if="list.length">
<b> 总数：{{list.length}} </b>
<b id="clear" @click="clear">清除</b>
</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
var top = new Vue({
el: "#box",
// 在此处补全代码，实现所需功能
data: {
list: [],
text: ''
},
methods: {
add() {
if (this.text !== '') {
this.list.push(this.text)
this.text = ''
}
},
remove(index) {
this.list.splice(index, 1)
},
clear() {
this.list = []
}
}
});
</script>
</body>
</html>
12. 【算法实现】小兔子爬楼梯
const climbStairs = (n) => {
// TODO：请补充代码
/**
* 思路：分析可得第n阶梯子的跳法等于第n-1和第n-2阶梯子的跳法之和
*/
//法一：递归思想
if (n <= 2) {
return n
} else {
return climbStairs(n - 1) + climbStairs(n - 2)
}
//法二：第1阶梯子有一种跳法 第2阶梯子有2种跳法，用a，b往后移代表第n-1和第n-2阶梯子的跳法
// if (n <= 2) {
// return n
// }
// let a = 1
// let b = 2
// let c
// while (n > 2) {
// c = a + b
//后移a，b
// a = b
// b = c
// n--
// }
// return c
//法三：利用解构赋值，整体思想与法二一样
// if (n <= 2) {
// return n
// }
// let a = 1
// let b = 2
// while (n > 2) {
// // 解构赋值
// [b, a] = [a + b, b]
// n--
// }
// return b
};
module.exports = climbStairs;13.【代码改错】学生信息统计
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("main"));
// 指定图表的配置项和数据
var option = {
title: {
text: "学生成绩统计",
},
tooltip: {},
legend: {
data: ["成绩"],
},
// TODO:待补充修改代码，定义x轴数据,并让数据正确显示
xAxis: {
data: ["张三", "李四", "王五", "贺八", "杨七", "陈九"],
},
// y轴
yAxis: {},
series: [{
name: "成绩",
type: "bar",
data: [55, 90, 65, 70, 80, 63],
}, ],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
14.【算法实现】随机数生成器
/**
* 封装函数，函数名 getRandomNum(min,max,countNum)
* 生成 min~max 范围的 countNum 个不重复的随机数，存入数组并返回
*/
//生成指定数目和范围的随机数
// const getRandomNum = function(min, max, countNum) {
// var arr = [];
// for (let i = 0; i < countNum; i++) {
// let number = Math.round(Math.random() * (max - min)) + min
// // 如果数组里已经存在该数则重新生成
// while (arr.indexOf(number) !== -1) {
// number = Math.round(Math.random() * (max - min)) + min
// }
// arr.push(number)
// }
// // 在此处补全代码
// return arr;
// };
// 法二
const getRandomNum = function(min, max, countNum) {
var arr = [];
// 在此处补全代码
let set = new Set()
while (set.size < countNum) {
let number = Math.floor(Math.random() * (max - min)) + min;
set.add(number)
}
arr = [...set]
return arr;
};
module.exports = getRandomNum; //请勿删除
