蓝桥杯Web前端练习

Baker-Chen

已于 2022-04-02 09:48:09 修改

阅读量1.7k

点赞数 2

分类专栏：蓝桥杯文章标签：蓝桥杯前端 js jquery echarts

于 2022-04-02 09:47:55 首次发布

本文链接：https://blog.csdn.net/m0_51969330/article/details/123145880

版权

蓝桥杯专栏收录该内容

9 篇文章 119 订阅

订阅专栏

蓝桥杯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.【功能实现】菜单树检索

<!DOCTYPE html>
<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.【功能实现】购物车

<!DOCTYPE html>
<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. 【功能实现】时间管理大师

<!DOCTYPE html>
<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; //请勿删除

Baker-Chen

关注

2
点赞
踩
26

收藏

觉得还不错? 一键收藏
打赏
0
评论
蓝桥杯Web前端练习

1. JQuery手风琴效果<div class="options"> <div class="option active" style="--optionBackground:url(../images/pic1.jpeg);" id="item1"> <div class="shadow"></div> </div> <div class="option" styl
复制链接

扫一扫