第十三届蓝桥杯Web比赛模拟题

黑猫几绛

已于 2022-05-02 23:37:11 修改

阅读量2.9k

点赞数 2

文章标签： html 蓝桥杯 web

于 2022-04-05 16:38:56 首次发布

本文链接：https://blog.csdn.net/flow_camphor/article/details/123971897

版权

中午吃午饭的时候突然想起来最近有个蓝桥杯，于是决定看看模拟赛当作复习了。
更新：好耶，拿了省一，省前十[狗头

修复网站显示问题

修改css引入的路径即可

修复注册验证问题

在写正则判断之前，需要复习一个原生的知识点：获取input框内的内容时，采用的是.value方法

现在再复习一下正则的基础语法。

正则表达式

正则表达式是由普通字符（例如字符 a 到 z）以及特殊字符（称为"元字符"）组成的文字模式。

普通字符

[ABC] 匹配字符串中所有的A、B、C字符
[^ABC] 匹配字符串中除了A、B、C字符以外的其他所有字符
[A-Z] -表示一个区间，匹配字符串中所有的大写字母
. 匹配除换行符（\n、\r）之外的任何单个字符，相等于**[^\n\r]**
\s 匹配所有的空白符，包括换行(\n)、制表符(\t)、换页符(\f)等等
\S 匹配所有的非空白符，不包括换行
\w 匹配字母、数字、下划线。等价于**[A-Za-z0-9_]**
\b 匹配一个单词边界，即字与空格间的位置。例如，/\bCha/匹配以’Cha’开头的单词，/ter\b/匹配以’ter’结尾的单词
\B 非单词边界匹配。例如，/\Bapt/匹配 Chapter 中的字符串 apt，但不匹配 aptitude 中的字符串 apt

特殊字符

所谓特殊字符，就是一些有特殊含义的字符。所以如果想要查找字符串中的特殊符号，需要对该符号进行转义

例如：如果要查找*号，需要在字符串中写为"xxxx\*xxx"

* 匹配前面的子表达式零次或多次。例如，zo* 能匹配 “z” 以及 “zoo”。* 等价于{0,}。
+ 匹配前面的子表达式一次或多次。例如，‘zo+’ 能匹配 “zo” 以及 “zoo”，但不能匹配 “z”。+ 等价于 {1,}。
? 匹配前面的子表达式零次或一次
{n} n 是一个非负整数。匹配确定的 n 次。例如：‘o{2}’ 不能匹配 “Bob” 中的 ‘o’，但是能匹配 “food” 中的两个 o
{n,} n 是一个非负整数。至少匹配 n 次
{n,m} m 和 n 均为非负整数，其中n <= m。最少匹配 n 次且最多匹配 m 次
^ 匹配输入字符串开始的位置
$ 匹配输入字符串结尾的位置

现在我们来看两个例子加深对特殊字符的印象：

设置 0~99 的两位数：/[0-9]{1,2}/
设置 1~99 的两位数： /\[1-9][0-9]?/（第一个数字为1-9，后面表示出现零次或一次1-9)，或者是/\[1-9][1-9]{0,1}/

* 和 + 限定符都是贪婪的，因为它们会尽可能多的匹配文字，只有在它们的后面加上一个 ? 就可以实现非贪婪或最小匹配。

例如：现在想要查找h1标签中的内容，比如

hi，黑猫几绛

我们首先可能会写出这样的正则：/^<.*>$/，这句话的意思是匹配从<到>之间的所有内容，显然不符合题意

那么我们修改一下，为***设置?进行贪婪匹配：/^<.*?>$/**

特殊字符的用法还有如：

用圆括号 () 可以表示所有选择项括起来，相邻的选择项之间用 | 分隔。
正则的先行断言和后行断言等等。

修饰符

i 将匹配设置为不区分大小写，搜索时不区分大小写: A 和 a 没有区别。
g 查找所有的匹配项
m 使边界字符 ^ 和 $ 匹配每一行的开头和结尾，记住是多行，而不是整个字符串的开头和结尾
s 默认情况下的圆点 . 是匹配除换行符 \n 之外的任何字符，加上 s 修饰符之后, . 中包含换行符 \n

好了，基础的正则了解这些就可以了，现在再来看看题目

模拟trim函数

// 首先将开始的空格去掉，再把结尾的空格去掉
// "  abc  " ----> "abc  " ----> "abc"
function trim(txt) {
    // \s 匹配所有的空白符，包括换行(\n)、制表符(\t)、换页符(\f)等等
    // 这里找到{0,}个\s，并将这些内容替换为空
    var afterTrimTxt = txt.replace(/^\s*/, "").replace(/\s*$/, "");
    return afterTrimTxt;
}

验证邮箱的合法性

// 验证规则：5-10个字符@1个或多个以上字符，以com、net、org结尾
function isEmail(email) {
    // \w{5,10}表示5-10个字符
    // \w+表示{1,}个字符
    // 在字符串中出现了.需要用转义符号
    var regExp = /^\w{5,10}@\w+\.(com|net|org)$/;
    var flag = regExp.test(email);
    return flag;
}

验证手机的合法性

// 验证规则：手机号要以 186、134-139 或 150-152 开头
function isPhone(phoneNumber) {
    var regExp = /^(186|13[4-9]|15[0-2])\d{8}$/; 
    var flag = regExp.test(phoneNumber);
    return flag;
}

封装函数实现个人所得税计算器

function cal(salary) {
  // TODO: 在此处补充代码
  var number = 0;
  if (salary <= 5000) {
    number = 0;
  } else if (salary > 5000 && salary <= 9000) {
    number = (salary-5000) * 0.03;
  } else if (salary > 9000 && salary <= 15000) {
    number = (salary-5000) * 0.05;
  } else if (salary > 15000) {
    number = (salary-5000) * 0.1;
  }
  return number;
}

Flex 经典骰子布局

目标样式：

骰子1

<div class="div1">
	<p></p>
</div>

.div1 {
	justify-content: center;
	align-items: center;
}

骰子2

 <div class="div2">
 	<p></p>
	<p></p>
 </div>

.div2{
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}

骰子3

这里介绍一下平时用的相对比较少的align-self：

这个属性可以允许单个项目有与其他项目不一样的对齐方式，这也就意味着，我们可以对某个flex盒子中的某个特定元素进行定位操作。

属性值：

auto 默认。元素继承其父容器的 align-items 属性，如果没有父容器，则为 “stretch”
stretch 定位元素以适合容器
center 元素位于容器的中央
flex-start 元素位于容器的开头
flex-end 元素位于容器的末端
baseline 元素被定位到容器的基线

**注意：**align-self 属性将覆盖弹性容器的 align-items 属性

<div>
	<p></p>
	<p></p>
	<p></p>
</div>

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

骰子4

<div class="div4">
    <div>
        <p></p>
        <p></p>
    </div>
    <div>
        <p></p>
        <p></p>
    </div>
</div>

由于页面在默认情况下都是采用流式布局的，所以首先需要让div4的两个子div纵向排列

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

骰子5

<div class="div5">
    <div>
        <p></p>
        <p></p>
    </div>
    <div>
        <p></p>
    </div>
    <div>
        <p></p>
        <p></p>
    </div>
</div>

.div5{
    justify-content: space-around;
    /* 和骰子4一样，将多行元素分行处理 */
    flex-direction: column;  
}
.div5 div{
    display: flex;
    justify-content: space-around;
}

骰子6

<div class="div6">
    <div>
        <p></p>
        <p></p>
    </div>
    <div>
        <p></p>
        <p></p>
    </div>
    <div>
        <p></p>
        <p></p>
    </div>
</div>

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

骰子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>

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

骰子8

题目要求使用justify-content、flex-wrap、flex-basis 与 align-items

这里介绍下flex-basis：

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小

属性值：

number 一个长度单位或者一个百分比，规定灵活项目的初始长度。
auto 默认值。长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定。

<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>

.div8{
    justify-content: space-around;
    flex-direction: column
}
.div8 div{
    display: flex;
    justify-content:space-between;
}

骰子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>

.div9{
    justify-content: space-around;
    flex-direction: column

}
.div9 div{
    display: flex;
    justify-content: space-around;
}

制作网站首页

照着给定的设计图写即可

响应式Gulp中文网

按照@media screen and(max-width: 1400px)，@media screen and(max-width: 1400px) and (mmin-width: 900px)来设置新的样式即可

@media screen and (max-width: 1400px) {
    nav .content{
        width: 900px !important;
    }
}

这里对max-width: 650px的情况进行举例：

@media screen and (max-width: 650px) {
    nav .content .list {
        display: none;
    }
    nav .content .menu {
        display: block;
        position: absolute;
        top: 15px;
        right: 10px;
    }
    main.clear section,
    main.clear ul,
    main.clear ul li {
        width: 100%;
    }
}

天气预报查询

使用JQuery的ajax通用写法：

$.ajax({
	type: "xxx",
	url: "xxx",
	dataType: "json",
	success: function(data){
		// ...
	},
    error: function(e){
        // ...
    }
})

注意：这里的引号一定要用双引号。

function getweather() {
     $.ajax({
         url: "js/weather.json",
         type: "get",
         success: function(data){
            let res = data.result
            let items = document.querySelectorAll('.item')
            for(let i = 0; i < items.length; i++){
                items[i].children[0].src = res[i].weather_icon
                items[i].children[1].children[0].innerHTML = res[i].weather
                items[i].children[1].children[1].innerHTML = res[i].temperature
                items[i].children[1].children[2].innerHTML = res[i].winp
                items[i].children[1].children[3].children[0].innerHTML = res[i].days
                items[i].children[1].children[3].children[1].innerHTML = res[i].week
            }
         }
     })
}

getweather();

实现卡号绑定功能

没学过JQ，只瞟过两眼…逃

function bind(cardno, password) {
    // 221431562123561238 123
    $.ajax({
        url: "js/cardnolist.json",
        type: "get",
        success: function(data){
            let cardnolist = data.cardnolist
            for(let i = 0; i < cardnolist.length; ++i){
                if (cardno === cardnolist[i].cardno && password === cardnolist[i].password) {
                    document.getElementById("tip1").classList.remove("fade");
                    document.getElementById("tip1").classList.add("show");
                    document.getElementById("tip2").classList.remove("show");
                    document.getElementById("tip2").classList.add("fade");
                    break;
                } else {
                    console.log('err', i);
                    document.getElementById("tip1").classList.remove("show");
                    document.getElementById("tip1").classList.add("fade");
                    document.getElementById("tip2").classList.remove("fade");
                    document.getElementById("tip2").classList.add("show");
                }
            }
        }
    })
}

$(document).ready(function() {
    $("#btnsubmit").click(function() {
        //卡号
        let cardno = $("#exampleInputCardno").val();
        //密码
        let password = $("#exampleInputPassword").val();
        bind(cardno, password);
    });
});

知乎首页数据动态化

<template>
  <div class="list">
    <div
      class="list-item"
      v-for="item in listInfo"
      :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>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      listInfo: []
    };
  },
  mounted() {
    axios.get("static/data/list.json").then(res=>{
      this.listInfo = res.data.data.listInfo
    })
  }
};
</script>

<style scoped>
.list-item {
  padding: 20px 0;
  overflow: hidden;
  border-bottom: 1px solid #dcdcdc;
}
.list-pic {
  float: right;
  width: 125px;
  height: 100px;
  display: block;
  border-radius: 4px;
}
.list-info {
  width: 500px;
  float: left;
}
.title {
  padding: 10px 0;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}
.desc {
  line-height: 22px;
  font-size: 13px;
  color: #999;
}
</style>

RESTfUl API 开发

app.get('/list', function(req, res) {
    fs.readFile(path.resolve(__dirname,'./users.json'), 'utf8', function(err, data) {
        res.send(data)
    });
})