前言
本章主要为大家讲解第十三届蓝桥杯（Web 应用开发）线上模拟赛的题目，接着往下看吧👇👇👇
文章目录
目录
第一题：修复网站显示问题
题目要求：
解题思路：
这个题目出现好几次了，我感觉正式比赛是肯定不会考的，妥妥送分。很明显css没响应。所以去找css。发现css引入的时候名字写错了。
我的答案：
<link href="css/index.css" rel="stylesheet" type="text/css">第二题：修复注册验证问题
题目要求：
解题思路：
这题主要考的是正则表达式，使用正则表达式的test(),检测一个字符串是否匹配某个模式。
对于正则表达式的匹配规则还有疑问的，可以看一下我写的这篇文章：(3条消息) 【JavaScript】声网编程竞赛7月专场_JBQ.627号的博客-优快云博客
https://blog.youkuaiyun.com/qq_62837899/article/details/129722109?spm=1001.2014.3001.5501
我的答案：
// 186 134-139 150-152
function isPhone(phoneNumber) {
return /^(186|13[4-9]|15[0-2])\d{8}$/.test(phoneNumber)
}第三题：封装函数实现个人所得税计算器
题目要求：
解题思路：
这题是最最基础的if……else if……else的题了，没什么技巧，就按给出的条件写。
我的答案：
function cal(salary) {
// TODO: 在此处补充代码
if(salary<5000){
return 0;
}else if(salary<=9000){
return (salary-5000)*0.03
}else if(salary<=15000){
return (salary-5000)*0.05
}else{
return (salary-5000)*0.1
}
}
module.exports = cal; //请勿删除第四题：Flex 经典骰子布局
题目要求：
解题思路：
这题主要考的是flex布局，学习里面属性的时候最好自己去敲一敲，就懂这个东西到底如何使用咋玩了。不懂的可以去看一下阮一峰老师写的的这篇文章，写的很细致：Flex 布局教程：语法篇 - 阮一峰的网络日志 (ruanyifeng.com)https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
我的答案：
<!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{
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.div3{
display: flex;
justify-content: space-between;
}
.div3>p:nth-child(2){
display: flex;
align-self: center;
}
.div3>p:nth-child(3){
display: flex;
align-self: 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{
display: flex;
flex-direction: column;
justify-content:space-around;
}
.div6{
display: flex;
flex-direction: column;
justify-content: space-around;
}
.div6>div{
display: flex;
justify-content: space-around;
}
.div7{
display: flex;
flex-direction: column;
justify-content: space-around;
}
.div7>div{
display: flex;
justify-content:space-around;
}
.div8{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.div8>div{
display: flex;
justify-content:space-between;
}
.div9{
display: flex;
justify-content: space-around;
}
.div9>div{
display: flex;
flex-direction: column;
justify-content: space-around;
}
</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>第五题：制作网站首页
题目要求：
解题思路：比较好的是里面结构都写好了但是有小部分需要改(比如nav的logo)，只需要写css部分。每个人写法都不同，仅供参考。
我的答案：
<!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=0"
/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>知乎日报 - 每天 3 次，每次 7 分钟</title>
<link href="css/style.css" rel="stylesheet" />
</head>
<body id="body">
<!--header start-->
<header class="headerbox">
<!--nav start-->
<nav class="navbox">
<h1><img src="./images/logo.png" alt=""></h1>
<div class="navright">
<a class="on" href="#body">app下载</a>
<a href="#tabtitle">浏览内容</a>
</div>
</nav>
<!--nav end-->
</header>
<!--header end-->
<!--banner start-->
<section class="banner">
<div class="container">
<div class="container-img">
<img
src="images/phone_sample.png"
alt="知乎日报应用截屏"
class="phoneimg loaded"
/>
</div>
<div class="content">
<h2>每天三次 每次七分钟</h2>
<div class="info">
在中国，资讯类移动应用的人均阅读时长是 5
分钟，而在知乎日报，这个数字是 21。
</div>
</div>
</div>
</section>
<!--banner end-->
<!--tabtitle start-->
<section class="tabtitle" id="tabtitle">
<h3>浏览内容</h3>
<h4>最新内容</h4>
</section>
<!--tabtitle end-->
<!--list start-->
<section class="list">
<ul>
<li>
<a href="#">
<img src="images/1.jpg" alt="" />
<p>怎样使金属变得很脆？</p>
</a>
</li>
<li>
<a href="#">
<img src="images/2.jpg" alt="" />
<p>有哪些对你很有冲击力的设计？</p>
</a>
</li>
<li>
<a href="#">
<img src="images/3.jpg" alt="" />
<p>有哪些很重要，教练却没有教的驾驶技巧？</p>
</a>
</li>
<li>
<a href="#">
<img src="images/5.jpg" alt="" />
<p>谢谢天上掉的玩具</p>
</a>
</li>
<li>
<a href="#">
<img src="images/6.jpg" alt="" />
<p>火车上的「最大上沙量」标识是什么意思？</p>
</a>
</li>
<li>
<a href="#">
<img src="images/7.jpg" alt="" />
<p>翼龙可以当飞行坐骑么？</p>
</a>
</li>
<li>
<a href="#">
<img src="images/1.jpg" alt="" />
<p>怎样使金属变得很脆？</p>
</a>
</li>
<li>
<a href="#">
<img src="images/2.jpg" alt="" />
<p>有哪些对你很有冲击力的设计？</p>
</a>
</li>
<li>
<a href="#">
<img src="images/3.jpg" alt="" />
<p>有哪些很重要，教练却没有教的驾驶技巧？</p>
</a>
</li>
<li>
<a href="#">
<img src="images/5.jpg" alt="" />
<p>谢谢天上掉的玩具</p>
</a>
</li>
<li>
<a href="#">
<img src="images/6.jpg" alt="" />
<p>火车上的「最大上沙量」标识是什么意思？</p>
</a>
</li>
<li>
<a href="#">
<img src="images/7.jpg" alt="" />
<p>翼龙可以当飞行坐骑么？</p>
</a>
</li>
</ul>
<div style="clear: both;"></div>
<div class="more">
<a href="#">更多精彩内容请在APP中查看</a>
</div>
</section>
<!--list end-->
<!--footer start-->
<footer class="footer">
<div class="footerBox">
<div class="footerL">
<p>
知乎日报是一款拥有千万用户的资讯类客户端，每日提供来自知乎社区的精选问答，还有国内一流媒体的专栏特稿。
</p>
<p>
主题日报包括动漫、设计、大公司、游戏、财经、电影、电子音乐、互联网安全等丰富内容，为业内人和资深爱好
者推荐各领域最精彩文章，满足高质量阅读需求。
</p>
<p>在知乎日报，告别浮躁，重获阅读的愉悦。</p>
<p>© 2020 知乎</p>
</div>
<div class="footerR">
<img src="images/qr.png" alt="" />
<p>扫描下载客户端</p>
</div>
</div>
</footer>
<!--footer end-->
</body>
</html>*{
margin: 0;
padding: 0;
}
li{
/*去除默认小圆点*/
list-style: none;
}
a{
/* 去除默认的下划线 */
text-decoration: none;
color: black;
}
/* nav */
.headerbox{
position: relative;
width: 1024px;
height: 78px;
margin: 0 auto;
}
.navbox>h1{
position: absolute;
float: left;
margin-left: 30px;
top: 50%;
transform: translate(0,-50%);
}
.navbox>div{
position: absolute;
right: 0;
top: 50%;
transform: translate(0,-50%);
}
.navright>a{
float: left;
width: 120px;
height: 32px;
line-height: 32px;
text-align: center;
}
.navright>a:nth-child(1){
color: #0099f2;
background-color: #F0F9FF;
}
/* banner */
.banner{
position: relative;
width: 1024px;
height: 100%;
background-color: #008BED;
margin: 0 auto;
}
.container-img{
margin-left: 30px;
}
.content{
position:absolute;
top: 50%;
right: 60px;
transform: translate(0,-50%);
}
.content>h2{
font-size: 40px;
line-height: 40px;
color: #fdfdfd;
}
.info{
width: 410px;
font-size: 16px;
line-height: 26px;
color: #99d1f8;
}
/* tabtitle */
.tabtitle{
position: relative;
width: 960px;
height: 100px;
margin: 0 auto;
padding: 0 30px;
background-color: #f9f9f9;
}
.tabtitle>h3{
position:absolute;
font-size: 24px;
top: 50%;
transform: translate(0,-50%);
}
.tabtitle>h4{
position:absolute;
font-size: 24px;
color: #ccc;
right: 30px;
top: 50%;
transform: translate(0,-50%);
}
/* list */
.list{
width: 1024px;
height: 100%;
background-color: #f9f9f9;
margin: 0 auto;
padding-bottom: 30px;
}
.list>ul>li{
float: left;
width: 300px;
height: 374px;
margin-left: 30px;
margin-bottom: 20px;
background-color: white;
}
.list>ul>li>a>img{
width: 260px;
height: 260px;
margin: 20px 20px;
}
.list>ul>li>a>p{
color: #333;
margin: 0 20px;
}
.more{
width: 960px;
text-align: center;
background-color: #e8eef2;
margin: 0 auto;
}
.more>a{
font-size: 20px;
line-height: 62px;
color: #59abdf;
}
/* footer */
.footer{
width: 1024px;
height: 224px;
background-color: #e5e5e5;
margin: 0 auto;
}
.footerBox{
margin: 0 30px;
padding-top: 32px;
}
.footerL{
float: left;
width: 710px;
height: 210px;
}
.footerL>p{
margin-bottom: 15px;
}
.footerR{
float: right;
width: 141px;
height: 152px;
text-align: center;
}第六题：响应式 Gulp 中文网
题目要求：
解题思路：这题也在之前的文章中写过了，就不再写一遍了，直接放答案了。
<style media="screen">
@media screen and (max-width:1400px) {
nav .content,
main section {
width: 900px;
}
}
@media screen and (max-width:900px) {
nav .content,
main section {
width: 700px;
}
}
@media screen and (max-width:650px) {
nav .content .list{
display: none;
}
main ul li{
width: 100%;
}
main ul li:nth-child(even) {
margin-left: 0;
}
}
<style>第七题：天气预报查询
题目要求：
解题思路：
这道题答案可以有很多，每个人想的不一样，写的也就不一样。可以写的很短，也可以写的很长。这道题主要考察的是jq的基础用法，也可以用js写。
逻辑比较简单，就是使用ajax获取数据，然后将对应的数据设置给对应元素的文本内容。
js中的 $.each(),方法是用于遍历的。
jq中的 text() 方法，用于设置或返回被选元素的文本内容。
我的答案：
function getweather() {
//TODO：请补充代码
$.ajax({
url:'js/weather.json',
type:'get',
success:function(res){
var result=res.result;
$.each(result,function(index,e){
$(`.item:eq(${index})>img`).attr('src',e.weather_icon)
$(`.item-mess:eq(${index})>div:eq(0)`).text(e.weather)
$(`.item-mess:eq(${index})>div:eq(1)`).text(e.temperature)
$(`.item-mess:eq(${index})>div:eq(2)`).text(e.winp)
$(`.item-mess:eq(${index})>div:eq(3)>span:eq(0)`).text(e.days)
$(`.item-mess:eq(${index})>div:eq(3)>span:eq(1)`).text(e.week)
})
}
})
}
getweather();第八题：实现卡号绑定功能
题目要求：
解题思路：
这道题也和之前的一道题差不多，不同的是他这里面使用了bootstrap中的class，反正思路是一样。没思路的伙伴可以看看这篇文章：
我的答案：
function bind(cardno, password) {
//Todo:补充代码
var cardnolist=[]
var count=0
$.ajax({
url:"js/cardnolist.json",
success:res=>{
cardnolist=res.cardnolist
cardnolist.forEach(element => {
if(cardno===element.cardno&&password===element.password){
$('#tip1').attr('class',"alert alert-primary alert-dismissible show")
$('#tip2').attr('class',"alert alert-warning alert-dismissible fade")
return
}else{
count++
}
});
if(count===cardnolist.length){
$('#tip1').attr('class',"alert alert-primary alert-dismissible fade")
$('#tip2').attr('class',"alert alert-warning alert-dismissible show")
}
}
})
}第九题：知乎首页数据动态化
题目要求：
解题思路：
主要是考vue的数据动态展示。首先发请求得到数据存放在data中然后使用v-for动态展示到页面上去。
我的答案：
<template>
<div class="list">
<div class="list-item" v-for="(info) in lists" :key="info.id">
<img class='list-pic' :src='info.imgUrl'/>
<div class="list-info">
<p class='title'>{{info.title}}</p>
<p class='desc'>{{info.desc}}</p>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
lists:[]
};
},
mounted(){
axios.get('../static/data/list.json').then(res=>{
this.lists=res.data.data.listInfo
})
}
};
</script>第十题：RESTful API 开发
题目要求：
我的答案：
//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);
});
})结语
我发现上一届的题目普遍都比较的简单，所以写的有些潦草(哪里写的有问题的，请各位大佬帮忙及时指出)。但是很明显上一届真的很简单，不像这一届(14届)的模拟题，有很多处理数据的题目，能感受到/(ㄒoㄒ)/~~难度明显上升了，特别是第十四届蓝桥杯（Web 应用开发）模拟赛 3 期-职业院校组里的页面布局真的很变态，还有分页组件那题。但愿正式比赛不要出不然真来不急。最后，祝各位能取得满意的成绩💪💪💪
扫一扫
5130
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
