第十三届蓝桥杯（Web 应用开发）模拟赛大专组参考答案

本文链接：https://blog.csdn.net/shaojiuli/article/details/123504535

1搜一搜呀

      computed: {
        filteredList() {
          // TODO：请补充代码 alt+B快速运行
          return this.list = this.postList.filter((p) => {//filter过滤器：
            return p.title.indexOf(this.search) != -1;//对于每一个对象中存在搜索字段则加入搜索结果
          })

        },
      },

2手风琴

死因：jquery

// TODO：请补充代码
$('.option').click((e)=>{
    // console.log(e.target.id)
    $('.option').removeClass('active')//全部清空激活class
   $(`#${e.target.id}`).addClass('active')//获取点击的元素
})  

法2
$('.option').each(()=>{
    $(this).click(()=>{
        $(this).addClass('actives')
        $(this).siblings().removeClass('actives')
    })
})

3关于你的欢迎语

// TODO：请修复 BUG
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;
}

4卡片化标签页

// 实现选项卡功能
function init() {
  // TODO 待补充代码
  let tabs = document.getElementsByClassName('tabs')//是一个数组
  let divs = tabs[0].getElementsByTagName('div')//这里需要使用索引值

  let content = document.getElementById('content')
  let contentdivs = content.getElementsByTagName('div')

  for (let i = 0; i < divs.length; i++) {
    divs[i].onclick = () => {//点击的元素 循环绑定点击事件
      for (let j = 0; j < divs.length; j++) {
        if (j == i) {
          divs[i].classList.add('active')
          contentdivs[i].classList.add('active')
        }else{
          divs[j].classList.remove('active')
          contentdivs[j].classList.remove('active')
        }
      }
    }
  }
}
init();


//官方写法：
// 实现选项卡功能
function init() {

  function Active(nodes, currerntNode) {
    for (let i = 0; i < nodes.length; i++) {
      nodes[i].classList.remove('active')
    }
    currerntNode.classList.add('active')
  }

  // TODO 待补充代码
  let tabs = [...document.querySelectorAll('.tabs>div')]
  let contents = [...document.querySelectorAll('#content>div')]
  for (const tab of tabs) {
    tab.addEventListener('click', function () {
      Active(tabs, this)
      Active(contents, contents[tabs.indexOf(this)])
    })
  }
}
init();

5个人博客

/* TODO:banner 上的文字 需要居中显示 */

.home-wrapper .banner .banner-conent .hero {
    margin-top: 3rem;
    text-align: center;
}


/* TODO: main-wrapper 通过设置main-wrapper 布局方式 让.main-left  .main-right 正确显示 */

.main-wrapper {
    display: flex;
    margin: 1.5rem auto 0 auto;
    max-width: 1100px;
    padding: 0 0.9rem;
    box-sizing: border-box;
    position: relative;
}


/*/* TODO 宽度自适应 居左显示 */

.main-wrapper .main-left {
    width: auto;
}

6水果拼盘

/* 菠萝 TODO 待补充代码 */

.yellow {
    display: flex;
    align-self: flex-end;
    order: 1;
}

7新年贺卡

// 随机数函数 从 greetings 数组中 随机取值 并作为函数返回值 注意：返回的是数组中的一个值
function writeGreeting() { // 0-1  0-5
  // TODO 待补充代码
  return greetings[parseInt(Math.random() * 5)]
}

/*
 * @param {*} greetingDisplay  要显示内容的dom元素
 */
//  show 将 writeGreeting 函数中返回的内容显示在 greetingDisplay 元素中
function show(greetingDisplay) {
  console.log(greetingDisplay)
  greetingDisplay.innerText = writeGreeting()
  // TODO 待补充代码
}

8给页面化个妆

还原了是还原了就是感觉我写的很蠢

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: azure;
    background-size: cover;
    color: #fff;
    height: 945;
    width: 1920;
}

.nav-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.nav-bar p {
    font-size: large;
    color: cornflowerblue;
    margin: 15px;
}

.form {
    height: 600px;
    width: 450px;
    background: rgba(0, 0, 0, .45);
    border-radius: 10px;
    text-align: center;
    padding-top: 75px;
}

form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

input {
    margin-top: 20px;
    width: 300px;
    border-radius: 5px;
    color: black;
    font-size: 20px;
    height: 30px;
    border: none;
    text-align: center;
    align-items: center;
}

.btns {
    width: 170px;
    display: flex;
    justify-content: space-between;
}

button {
    margin-top: 20px;
    width: 80px;
    height: 30px;
    color: #fff;
    align-items: center;
    font-size: 16px;
    text-align: center;
    border: #041c32 solid 2px;
    background: #2d4263;
}

.content-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.content {
    position: absolute;
    top: -50px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: relative;
    display: float;
    top: 75px;
}

h2 {
    display: inline;
    font-size: 45px;
    font-weight: 800;
}

.text {
    position: relative;
    top: -300px;
}

a {
    text-decoration: none;
    color: white;
}


/*TODO：请补充代码*/

9台阶问题

const climbStairs = (n) => {
    // TODO：请补充代码
    if (n == 1 || n == 2) return n;
    return (climbStairs(n - 1) + climbStairs(n - 2))
};
module.exports = climbStairs;

10购物车

nnd,文本和请求都需要改

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <script src="./js/vue.js"></script>
    <script src="./js/axios.js"></script>
    <style>
        h4 {
            text-align: center;
        }
        
        .box-card {
            width: 200px;
            overflow: hidden;
            margin: 0 auto;
        }
        
        .box-card img {
            width: 100%;
            height: auto;
        }
        
        .bottom {
            margin: 8px 0;
        }
    </style>
</head>

<body>
    <div class="container" id="app">
        <h4>购物车</h4>
        <!--TODO 购物车列表 -->
        <div v-for="item in carlist" key="item.id">
            <div class="box-card">
                <img :src="item.img" alt="">
                <img>
                <div>
                    <span>
						{{item.name}}
					</span>
                    <div class="bottom clearfix">
                        <button type="text" class="button" @click="item.num++">+</button>
                        <button type="text" class="button">
						{{item.num}}
						</button>
                        <button type="text" class="button" @click="item.num--">-</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

    <!-- 引入组件库 -->
    <script src="./js/axios.js"></script>
    <script>
        // import axios from './js/axios.js'//没有这个包不能使用
        new Vue({
            el: "#app",
            data: {
                carlist: [] //购物车列表
            },


            // created() {//法1
            //     //TODO 使用axios  请求购物车列表
            //     this.gets()
            // },
            // methods: {
            //     async gets() {
            //         let res = await axios.get('./carList.json')
            //         this.carlist = res.data
            //     }
            // }

            async created() { //法2
                //TODO 使用axios  请求购物车列表
                let res = await axios.get('./carList.json')
                this.carlist = res.data
            },


        })
    </script>
</body>

</html>