第十三届蓝桥杯（Web 应用开发）线上模拟赛

1.【Bug 调试】修复网站显示问题

如上所示的 index.html 布局不符合最终要求。请检查 exam01 下的各个文件，找到并修复项目存在的 Bug，使果壳儿页面正常显示

题解：

css文件路径名错误，style修改为index

2.【Bug 调试】修复注册验证问题

要求手机号要以 186、134-139 或 150-152 开头，满足这些格式的手机号可以提交，否则显示「手机号格式不正确」。

题解：

正则表达式：

3.【功能实现】封装函数实现个人所得税计算器

题解：

function cal(salary) {// TODO: 在此处补充代码
let shui = 0if (salary <= 5000) {shui = 0}else if (salary <= 9000){shui = (salary - 5000) * 0.03}else if (salary <= 15000){shui = (salary - 5000) * 0.05}else{shui = (salary - 5000) * 0.1}return shui
}
module.exports = cal; //请勿删除

4.【页面布局】Flex 经典骰子布局

题解：

Flex 布局教程：语法篇 - 阮一峰的网络日志 (ruanyifeng.com)

.div1 {justify-content: center;align-items: center;}.div2 {flex-direction: column;justify-content: space-around;align-items: center;}.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;}.div4,.div5,.div6,.div7,.div8,.div9 {flex-direction: column;justify-content: space-around;}.div4 div,.div5 div,.div6 div,.div7 div,.div8 div,.div9 div {display: flex;justify-content: space-around;}.div8 div {justify-content: space-between;}

5.制作网站首页

* {padding: 0;margin: 0;
}
#body {width: 1024px;margin: auto;background-color: #f9f9f9;}
a {text-decoration: none;
}
li {list-style: none;
}
.headerbox {height: 78px;
}
.navbox .navleft {float: left;margin-top: 15px;margin-left: 15px;
}
.navbox .navright {float: right;margin-top: 25px;}
.navright a {color: #333333;
}
.navright .on {width: 120px;height: 32px;background-color: #F0F9FF;color: #0099F2;display: inline-block;text-align: center;line-height: 32px;
}
.banner {background-color: #008BED;height: 450px;
}
.banner .content h2 {font-size: 40px;line-height: 40px;color: #fdfdfd;margin-bottom: 15px;
}
.banner .info {font-size: 16px;line-height: 26px;color: #99d1f8;
}
.phone {float: left;height: 450px;
}
.phone img {
}
.content {float: rights;height: 450px;/* margin-left: 350px; */transform: translateX(150px);padding-top: 120px;
}
.tabtitle h3 {font-size: 24px;color: #000000;float: left;margin-top: 30px;}
.tabtitle h4 {font-size: 24px;float: right;color: #cccccc;margin-top: 30px;
}
.tabtitle {height: 100px;
}
.tabtitle,
.list {width: 960px;margin: auto;background-color: #f9f9f9;
}
.list img {width: 260px;height: 260px;margin-left: 20px;margin-top: 20px;
}
.list li {width: 300px;height: 374px;background-color: #fff;margin-bottom: 20px;
}
.list ul {display: flex;flex-wrap: wrap;
}
.list li:nth-child(3n+1) {margin-right: 30px;
}
.list li:nth-child(3n+2) {margin-right: 30px;
}
.list li p {margin-left: 20px;color: #333333;font-size: 14px;
}
.more {height: 62px;background-color: #e8eef2;
}
.more a {font-size: 20px;line-height: 62px;color: #59abdf;text-align: center;display: block;
}
.footer {margin-top: 30px;background-color: #e5e5e5;height: 265px;
}
.footerL {margin-top: 32px;margin-left: 32px;width: 710px;height: 210px;float: left;
}
.footerL p {line-height: 25px;display: block;margin-bottom: 15px;
}
.footerBox p {font-size: 14px;color: #000000;
}
.footerR {float: right;
}
.footerR img {width: 141px;height: 152px;margin-right: 30px;margin-top: 30px;
}
.footerR p {margin-left: 20px;
}

6.响应式gulp中文网

            @media screen and (max-width: 1400px) {nav .content,main.clear section,main.clear ul {width: 900px!important;}}@media screen and (max-width: 900px) {nav .content,main.clear section,main.clear ul,main.clear ul li {width: 700px!important;}}@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%!important;}}

7.【API 开发】RESTful API 开发

//TODO：请补全获取用户列表代码
app.get('/list', function(req, res) {fs.readFile(path.resolve(__dirname, './users.json'), 'utf-8', function(err, data) {data = JSON.parse(data);res.json(data);})
})

8.【数据交互】天气预报查询

function getweather() {
$.ajax({url:'js/weather.json',success(data){var sum='';var box = document.getElementById('box');for(var i=0;i<data.result.length;i++){const e=data.result[i];console.log(e);var html=`<div class="item" id="Monday"><img src="${e.weather_icon}"><div class="item-mess"><div>${e.weather}</div><div>${e.temperature}</div><div>${e.winp }</div><div><span>${e.days }</span><span>${e.week }</span></div></div></div>`;sum+=html;}box.innerHTML=sum; }
})
}
getweather();

9.【数据交互】实现卡号绑定功能

function bind(cardno, password) {//Todo:补充代码let data={};$.ajax({url: 'js/cardnolist.json',async:false,success:function(msg){data = msg.cardnolist}})let flag = falsefor(const index in data){if(data[index].cardno == cardno && data[index].password == password){flag = truebreak;}}if(flag) {$('#tip1').addClass('show').removeClass('fade')$('#tip2').addClass('fade').removeClass('show')}else{$('#tip2').addClass('show').removeClass('fade')$('#tip1').addClass('fade').removeClass('show')}}

10.【数据交互】知乎首页数据动态化

<template><div class="list"><divclass="list-item"v-for="item in list":key="item.id"><imgclass='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 {list: []};},methods:{async getList(){axios.get('static/data/list.json').then(res=>{console.log(res);this.list = res.data.data.listInfo;})}},mounted() {this.getList()}
};
</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>

第十三届蓝桥杯（Web 应用开发）线上模拟赛相关推荐

第十三届蓝桥杯Web应用开发（大学组）
文章目录前言 01.水果盘 **题目:** **解答:** 02.展开你的扇子题目解答: 03.和手机相处的时光题目解答 04.灯的颜色变化题目解答 05.冬奥大抽奖题目解答 06蓝 ...
【蓝桥杯Web】2022年第十三届蓝桥杯Web大学组国赛真题解析
前言省赛真题解析见: 2022年第十三届蓝桥杯Web大学组省赛真题解析(完整版) 2022年第十三届蓝桥杯Web大学组省赛真题解析(精华版) 更多蓝桥杯题解请查阅专栏:蓝桥杯之前写省赛解析时篇幅过 ...
2022.4.9第十三届蓝桥杯web组省赛个人题解
2022第十三届蓝桥杯第一次开放了web组赛道,博主作为一名前端小白,参加了这次比赛.一共十个题目,目的均是实现特定的网页效果,考点包含三件套.jQuery和vue,这里简单的进行一下个人的题解记录. ...
第十三届蓝桥杯青少年创意编程 C++组省赛
第十三届蓝桥杯省赛(2022年4月17日)C++中级组题解第十三届蓝桥杯省赛(2022年4月17日)C++中级组题解_金博欣的博客-CSDN博客第十三届蓝桥杯青少组省赛C++中级组(0417)讲解 ...
第13届蓝桥杯 Web应用开发赛道题解
01水果拼盘(5分) /* TODO:待补充代码 */ #pond {flex-flow: column wrap; } 这一题真的挺有意思的,如果我们自己来写这个页面的话应该会按照下面的进行布局 3 ...
2023年第十四届蓝桥杯Web应用开发(职业院校组)省赛真题
前言: 因博主申请的线上考试所以留下了真题,本篇文章只有题目没有答案,因博主技术有限(请理解一下),博主只拿了省二蓝桥杯真题网盘地址: 链接:https://pan.baidu.com/s/1x_J ...
2022第十三届蓝桥杯web组题解
文章目录 01水果拼盘题目解答 02展开你的扇子题目解答 03和手机相处的时光题目解答 04灯的颜色变化题目解答 05冬奥大抽奖题目解答 06蓝桥知识网题目解答 07布局切换 ...
第十四届蓝桥杯Web应用开发—模拟赛3期--网页PPT--蓝桥校园一卡通--心愿便利贴
文章目录 1:网页PPT (5分) ✔✔✔ 2:蓝桥校园一卡通 (10分)✔✔✔ 3:心愿便利贴 (15分) ✔✔✔ 1:网页PPT (5分) ✔✔✔ switchPage( ) switchPage ...
【蓝桥杯Web】2022年第十三届蓝桥杯Web大学组省赛真题解析（精华版）
【蓝桥杯Web】2022年第十三届蓝桥杯Web大学组省赛真题解析（完整版）

第十三届蓝桥杯（Web 应用开发）线上模拟赛

第十三届蓝桥杯（Web 应用开发）线上模拟赛相关推荐

最新文章

热门文章