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

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

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

题解：

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

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

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

题解：

正则表达式：

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

题解：

function cal(salary) {
    // TODO: 在此处补充代码
let shui = 0
   if (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
                    
                    

                        
${e.weather}
                        
${e.temperature}
                        
${e.winp }
                        

                            ${e.days }
                            ${e.week }
                        
                    
                

`; 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 = false
    for(const index in data){
        if(data[index].cardno == cardno && data[index].password == password){
            flag = true
            break;
        }
    }
    if(flag) {
        $('#tip1').addClass('show').removeClass('fade')
        $('#tip2').addClass('fade').removeClass('show')
    }else{
        $('#tip2').addClass('show').removeClass('fade')
        $('#tip1').addClass('fade').removeClass('show')

    }
 
}

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