第十四届蓝桥杯web前端组刷题日志---极简优雅题解

最新推荐文章于 2024-07-11 17:17:41 发布

软工212钱卢骏

最新推荐文章于 2024-07-11 17:17:41 发布

阅读量188

点赞数 1

分类专栏：蓝桥杯web 文章标签：前端蓝桥杯 web

本文链接：https://blog.csdn.net/Nathan_Qian/article/details/130887456

版权

蓝桥杯web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这里聚集了我在蓝桥杯官网题库刷的所有题目题解，希望能够给正在备赛的同学提供些许帮助！

2023-5-26

1521 修复注册验证问题

/*这是一道正则表达式的题目*/
let regExp = /^(186|13[4-9]|15[0-2])\d{8}$/;
let flag = regExp.test(phoneNumber);
return flag;

1523 Flex经典骰子布局

/*关于flex布局的用法题*/
       .div2 {
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
        }

        .div3 {
            display: flex;
            justify-content: space-around;
        }
        .div3>p:nth-child(2){
            align-self: center;
        }
        .div3>p:nth-child(3){
            align-self:flex-end;
        }

        .div4{
            display: flex;
            justify-content: space-around;
        }
        .div4>div{
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }

        .div5{
            display: flex;
            justify-content: space-around;
        }
        .div5>div:first-child,:last-child{
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }
        .div5>div:nth-child(2){
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .div67{
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }
        .div67>div{
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }

        .div8{
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }
        .div8>div{
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }
        .div8>div:nth-child(2) p:nth-child(2){
            background-color: #fff;
        }

1762 搜一搜呀

          filteredList() {
         			return this.postList.filter(post => post.title.match(this.search))
          }
// 模糊搜索

1526 天气预报 jquery

$.get发送请求天气预报

 function getweather() {
     //TODO：请补充代码
     let row = []
     $.get('./js/weather.json', res => {
        let list = res.result
        $.each(list, (i, item) => {
            row.push(
                `
                <div class="item">
                <img src="${item.weather_icon}" />
                <div class="item-mess">
                    <div>${item.weather}</div>
                    <div>${item.temperature}</div>
                    <div>${item.winp}</div>
                </div>
                <div>
                    <span>${item.days}</span>
                    <span>${item.week}</span>
                </div>
            </div>`
            )
            $('.week-weather').empty().append(row.join(""))
        })
     })
}

getweather();

1525 响应式中文网 css

@media screen and (max-width: 1400px){
//当宽度超过1400px时,这个媒体查询内的内容就不作用了
  @media screen and (max-width: 900px){
    //当宽度小于900px时，作用这个媒体查询内的内容
  }
}

1528 知乎首页数据动态化 axios

/*这是一道axios请求的问题
主要关注的重点是axios请求的部分并且如何在列表中渲染
*/
 <div class="list">
    <div class="list-item" v-for="item in list" :key="item.id">
      <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>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      list:[]
    };
  },
  mounted(){
    this.getlist()
  },
  methods:{
    getlist(){
      axios.get("static/data/list.json").then(res =>{
        this.list = res.data.data.listInfo
      })
    }
  }
};
</script>

1527 实现卡号绑定功能 ajax

function bind(cardno, password) {
    //Todo:补充代码
    $.get('js/cardnolist.json',res => {
      //some 方法用来判断数组中是否存在符合指定条件的元素
        if(res.cardnolist.some( item => item.cardno == cardno &&item.password == password))
        {
            $("#tip1").removeClass("fade").addClass("show")
            $("#tip2").removeClass("show").addClass("fade")
        }
        else
        {
            $("#tip1").removeClass("show").addClass("fade")
            $("#tip2").removeClass("fade").addClass("show")
        }
    })
}
/*
  这题也是一道ajax请求的题目
  some的语法重点关注一下
*/

*1530 Restful api的开发 nodejs

let express = require('express');
let app = express()
let fs = require('fs')
let path = require('path')
app.use(express.json())
app.use(express.urlencoded({ extended: false }))

app.post('/add',(req,res) => {
  fs.readFile(path.resolve(__dirname,'./users.json'),'utf8',(err,data) => {
    data = JSON.parse(data)
    data['userlist'].push({
      'id': 4 ,
      'username': 'qian',
      'password': '123456'
    })
    res.json(data)
  })
})

app.get('/list', function(req, res) {
  fs.readFile(path.resolve(__dirname,'./users.json'), 'utf8', function(err, data) {
      data = JSON.parse(data);
      res.json(data['uselist']);
  });
})


app.listen(8080,() => {
  console.log('运行在8080端口')
})

module.exports = app;
/*
这是一道nodejs相关的题目，搭建了一个Restful风格的接口，用来读取use.json这个文件里的信息
*/

**1767 水果拼盘 css Un

.yellow {
	align-self: flex-end;
	order: 2;
}
/*
首先读懂html结构，然后再去考虑它的flex结构
css类型的题需要分析html结构以及给出的样式是怎么回事
相对来说耗时会长一点
*/

1763 折叠手风琴 jq

/*
这道题看起来比较吓人
实际上样式它已经给你写好了在active类里
所以考点实际上是使用jq语法来实现给当前点击的dom添加active类
然后给它相邻的dom去除active类
*/

    $(".option").click(function()
    {
        $(this).addClass("active").siblings().removeClass("active")
    })

1764 关于你的欢迎语 js

/*
对于input，要想获得input框里的内容
使用dom.value属性即可
*/
function generate() {
    subject = document.getElementById("subject").value
    event1 = document.getElementById("event1").value
    event2 = document.getElementById("event2").value
    if (subject.length==0 || event1.length==0 || event2.length==0)  return;
    result = `欢迎用户${subject}在${event2}学习${event1}课程！`;
    document.getElementById("result").value = result;
}

1453 修复网站相关问题 css

/* 这道题
说明了出题人惊奇的脑回路 样式引入错误 当我打开style.css时就感觉不对劲了，怎么写的跟生成的一样，不像是想让我看懂的代码
*/

1765 卡片化标签页 js

/*
这里我本来想用sibling方法，但是想到点击选项卡，dom之间不一定是相邻的
因此需要用二层循环，
第一层循环给每个tabs添加一个onclick监听
第二层循环给每一个tabs清除掉active类
并且给当前点击对象添加一个active类
*/
function init() 
{
  let tabs = document.getElementsByClassName("tabs")[0].children
  let card = document.getElementById("content").children
  for(let index = 0; index < tabs.length; index++)
  {
    tabs[index].onclick =() =>
    {	
      for(let j =0; j< tabs.length; j++)
      {
        tabs[j].classList.remove('active')
        card[j].classList.remove('active')
      }
        tabs[index].classList.add('active')
        card[index].classList.add('active')
    }
  }
}
init();