第十三届蓝桥杯（Web 应用开参考发）省赛【参考答案】第X题

原创已于 2022-04-09 15:05:12 修改 · 741 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#蓝桥杯 #前端 #javascript

于 2022-04-09 15:02:15 首次发布

本文档展示了多个网页交互和视觉效果的实现，包括水果拼盘布局、扇子展开动画、图表绘制、灯颜色变化模拟、抽奖转盘效果、蓝桥知识网布局以及布局切换和购物车功能。涉及CSS3、JavaScript、Vue.js、Axios和数据渲染等技术，旨在提升网页动态性和用户体验。

PS：仅供参考

01水果拼盘(5分）

#pond {
  flex-direction: column;
  flex-wrap: wrap;
  display: flex;
}

02展开你的扇子(5分)

/*TODO：请补充 CSS 代码*/
#box:hover #item6{
  transform: rotateZ(-10deg);
}

#box:hover #item5 {
  transform: rotateZ(-20deg);
}

#box:hover #item4 {
  transform: rotateZ(-30deg);
}

#box:hover #item3 {
  transform: rotateZ(-40deg);
}

#box:hover #item2 {
  transform: rotateZ(-50deg);
}

#box:hover #item1 {
  transform: rotateZ(-60deg);
}

#box:hover #item7 {
  transform: rotateZ(10deg);
}

#box:hover #item8 {
  transform: rotateZ(20deg);
}

#box:hover #item9 {
  transform: rotateZ(30deg);
}

#box:hover #item10 {
  transform: rotateZ(40deg);
}

#box:hover #item11 {
  transform: rotateZ(50deg);
}

#box:hover #item12 {
  transform: rotateZ(60deg);
}

03和手机相处的时光(10分)

      xAxis: {
        type: "category",
        data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      },
      yAxis: {
        type: "value",
        data: [1,2,3,4,5,6]
      },

04灯的颜色变化（10分)

// TODO：完善此函数 显示红色颜色的灯
function red(def1,red1) {
    setTimeout(()=>{
        def1.style.display='none';
        red1.style.display='inline-block';
    },3000)
}

// TODO：完善此函数  显示绿色颜色的灯
function green(red1,gre1) {
    setTimeout(()=>{
        red1.style.display='none';
        gre1.style.display='inline-block';
    },6000)
 }

// TODO：完善此函数
function trafficlights() {
    let def1 = document.getElementById('defaultlight')
    let red1 = document.getElementById('redlight')
    let gre1 = document.getElementById('greenlight')
    red(def1,red1) 
    green(red1,gre1) 
 }

trafficlights();

05冬奥大抽奖(15分)

let rollTime; // 定义定时器变量用来清除定时器
let time = 0; // 转动次数
let speed = 300; // 转动时间间隔
let times; // 总转动次数

// 开始按钮点击事件后开始抽奖
$("#start").on("click", function () {
  $("#award").text(""); //清空中奖信息
  times = parseInt(Math.random() * (20 - 30 + 1) + 20, 10); // 定义总转动次数，随机20-30次
  rolling();
});

// TODO：请完善此函数
function rolling() {
  time++; // 转动次数加1
  clearTimeout(rollTime);
  $(`.li${(time - 1) % 8 == 0 ? 8 : (time - 1) % 8}`).removeClass('active')
  $(`.li${time % 8 == 0 ? 8 : time % 8}`).addClass('active')
  rollTime = setTimeout(() => {
    window.requestAnimationFrame(rolling); // 进行递归动画
  }, speed);

  // time > times 转动停止
  if (time > times) {
    //$("#award").text($(`.li${time % 8 == 0 ? 8 : time % 8}`).text())
    $("#award").text(恭喜您抽中了${$( '.active ' ).text()}! !!`);//没看到文字还要改，RNM退钱！
    clearInterval(rollTime);
    time = 0;
    return;
  }
}

06蓝桥知识网(15分)

html

<!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=no" />
  <title>蓝桥知识网</title>
  <link rel="stylesheet" href="./css/style.css" />
</head>

<body>
  <!--TODO：请补充代码-->

  <div class="bigbox bg">
    <div class="box box1">
      <div class="header">
        <div class="lefhead">
          蓝桥知识网
        </div>
        <div class="righead">
          <span class="tittlehead">首页</span>
          <span class="tittlehead">热门技术</span>
          <span class="tittlehead">使用手册</span>
          <span class="tittlehead">知识库</span>
          <span class="tittlehead">练习题</span>
          <span class="tittlehead">联系我们</span>
          <span class="tittlehead">更多</span>
        </div>
      </div>
      <div class="top">
        <div class="head1">蓝桥云课</div>
        <div class="head2">随时随地丰富你的技术栈！</div>
        <div class="head3">加入我们</div>
      </div>
    </div>
  </div>
  <div class="bigbox ">
    <div class="box box2">
      <div class="txtbox">
        <div class="txttxt">
          <div class="txttittle">人工智能</div>
          <div class="txtinnner">人工智能亦称智械、机器智能，指由人制造出来的机器所表现出来的智能。通常人工智能是指通过普通计算机程序来呈现人类智能的技术。</div>
        </div>
        <div class="txttxt">
          <div class="txttittle">后端开发</div>
          <div class="txtinnner">后端开发是实现页面的交互逻辑，通过使用后端语言来实现页面的操作功能，例如登录、注册等。</div>
        </div>
      </div>
      <div class="txtbox">
        <div class="txttxt">
          <div class="txttittle">前端开发</div>
          <div class="txtinnner">前端开发是创建 WEB 页面或 APP 等前端界面呈现给用户的过程，通过 HTML，CSS 及 JavaScript
            以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。
          </div>
        </div>
        <div class="txttxt">
          <div class="txttittle">信息安全</div>
          <div class="txtinnner">ISO（国际标准化组织）的定义为：为数据处理系统建立和采用的技术、管理上的安全保护，为的是保护计算机硬件、软件、数据不因偶然和恶意的原因而遭到破坏、更改和泄露。</div>
        </div>
      </div>
    </div>
  </div>
  <div class="bigbox boder">
    <div class="box box3">
      <div class="b1">© 蓝桥云课 2022</div>
      <div class="b2">京公网安备 11010102005690 号 | 京 ICP 备 2021029920 号</div>
    </div>
  </div>
</body>

</html>

css

/*
 TODO：请补充代码
*/
body {
    padding: 0;
    margin: 0;
}

.bg {
    background: #a6b1e1;
}

.box {
    width: 1024px;
    margin: auto;
}

.header {
    height: 46px;
    width: 100%;
    align-items: center;
}

.top {
    height: 427px;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.box1 {
    padding-top: 13px;
}

.tittlehead {
    padding-left: 8px;
    padding-right: 8px;
    font-size: 16px;
    color: white;
}

.lefhead {
    height: 46px;
    line-height: 46px;
    text-align: center;
    font-size: 18px;
    color: white;
    float: left;
    padding-left: 8px;
}

.righead {
    height: 46px;
    line-height: 46px;
    text-align: center;
    margin-left: 357px;
    float: left;
}

.head1 {
    color: black;
    font-size: 45px;
    margin-top: 30px;
}

.head2 {
    margin-top: 62px;
    color: white;
    font-weight: 200;
    font-size: 21px;
}

.head3 {
    margin-top: 36px;
    padding: 8px;
    color: #efbfbf;
    font-size: 18px;
    border-radius: 2px;
    box-shadow: inset 0 0 0 2px #efbfbf;
}

.box2 {
    margin-top: 74px;
    height: 302px;
    display: flex;
    justify-content: space-between;
}

.txtbox {
    width: 502px;
}

.txttxt {
    height: 144px;
}

.txttittle {
    font-size: 30px;
    font-weight: 200;
    color: black;
}

.txtinnner {
    line-height: 1.4em;
    font-size: 18px;
    color: #aaa;
}

.boder {
    border-top: #aaa solid 2px;
}

.box3 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 80px;
    color: #aaa;
    font-size: 14px
}

.b1 {
    margin-top: 30px;
}

.b2 {
    margin-top: 10px;
}

07布局切换(20分)

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

<head>
  <meta charset="UTF-8" />
  <title>布局切换</title>
  <script type="text/javascript" src="./js/vue.js"></script>
  <link rel="stylesheet" type="text/css" href="./css/index.css" />
  <script src="./js/axios.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
  <div id="app" v-cloak>
    <!-- TODO：请在下面实现需求 -->
    <div class="bar">
      <a :class="{'grid-icon':true ,'active':isgrid}" @click="choose1"></a>
      <a :class="{'list-icon':true ,'active':!isgrid}" @click="choose2"></a>
    </div>
    <!--grid 示例代码，动态渲染时可删除-->

    <ul class="grid" v-show="isgrid" v-for=" i in goodsList">
      <li>
        <a :href="i.url" target="_blank"> <img :src="i.image.large" /></a>
      </li>
    </ul>

    <ul class="list" v-show="!isgrid" v-for="i in goodsList">
      <li>
        <a :href="i.url" target="_blank"> <img :src="i.image.large" /></a>
        <p>{{i.title}}</p>
      </li>
    </ul>

  </div>
</body>

</html>
<script type="text/javascript">
  var vm = new Vue({
    el: "#app",
    data: {
      goodsList: [],
      isgrid: true,
    },
    async mounted() {
      // TODO：补全代码实现需求
      let res = await axios.get('./goodsList.json')
      this.goodsList = res.data
      console.log(this.goodsList);
    },
    methods: {
      choose1() {
        this.isgrid = true
      },
      choose2() {
        this.isgrid = false
      }
    }
  });
</script>

08购物车(20分)


<script>
  new Vue({
    el: '#app',
    data: {
      cartList: [],
      goodsList: []
    },
    mounted() {
      this.goodsList = GoodsArr;
    },
    methods: {
      addToCart(goods) {
        // TODO：修改当前函数，实现购物车加入商品需求
        console.log(goods);
        goods.num = 1;
        if (this.cartList.length != 0) {
          for (i of this.cartList) {
            if (i.id == goods.id) {
              i.num++
              return;
            }
          }
          this.cartList.push(goods);
          this.cartList = JSON.parse(JSON.stringify(this.cartList));
        }
        else {
          this.cartList.push(goods);
          this.cartList = JSON.parse(JSON.stringify(this.cartList));
        }
      },
      removeGoods(goods) {
        console.log(goods.id)
        // TODO：补全代码实现需求
        if (goods.num > 1) {
          goods.num--;
        } else {
          this.cartList = this.cartList.filter(i => {
            console.log(i)
            if (i.id != goods.id) {
              return true
            }
          })
        }
      }
    }
  });
</script>

09寻找小狼人(25分)

// 返回条件为真的新数组
Array.prototype.myarray = function (cb) {
  /*let base = JSON.parse(JSON.stringify(this));
  let newarry = []
  for (item of base) {
    if (cb(item)) {
      newarry.push(item)
    }
  }*/
  return newarry
  // TODO：待补充代码
  //大佬的另一种解法!!!!!!!!!
  for(let i=this.length-1;i>0;i--) !cb(this[i])&& this.splice(i,1)
  return this
};

10课程列表(25分)

let pageNum = 1; // 当前页码，默认页码1
let maxPage; // 最大页数
// TODO：待补充代码
var baseList;

// 点击上一页
let prev = document.getElementById("prev");
let writebox = document.getElementsByClassName('list-group')

prev.onclick = function () {
  // TODO：待补充代码
  if (pageNum !== 2) {
    next.classList.remove('disabled')
  } else {
    prev.classList.add('disabled')
  }
  if (pageNum !== 1) {
    --pageNum;
    getpages()
  }
  setbottom()
};
// 点击下一页
let next = document.getElementById("next");

next.onclick = function () {
  // TODO：待补充代码
  if (maxPage !== pageNum + 1) {
    prev.classList.remove('disabled')
  } else {
    next.classList.add('disabled')
  }
  if (maxPage !== pageNum) {
    ++pageNum
    getpages()
  }
  setbottom()
};

function writetxt(item) {
  return `<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
  <h5 class="mb-1">${item.name}</h5>
  <small>${(item.price / 100).toFixed(2)}元</small>
</div>
<p class="mb-1">${item.description}</p>
</a>`
}

function getpages() {
  let data = ''
  for (let i = (pageNum - 1) * 5; i < baseList.length && i < pageNum * 5; i++) {
    data += writetxt(baseList[i])
  }
  writebox[0].innerHTML = data
}
function setbottom() {
  document.querySelector("#pagination").innerHTML = `共&nbsp${maxPage}&nbsp页，当前&nbsp${pageNum}&nbsp页`
}

async function open() {
  res = await axios.get('./js/carlist.json')
  baseList = res.data;
  maxPage = Math.ceil(baseList.length / 5);
  getpages()
  setbottom()
}
open()

附：高级写法（大佬写的）

let pageNum = 1; // 当前页码，默认页码1
let maxPage; // 最大页数

// TODO：待补充代码
// 模拟后端接口
const getData = (pageNum, maxPage) => new Promise(async (resolve, reject) => {
  let res = await axios.get('/js/carlist.json')
  if (!res.data || !pageNum || !maxPage) resolve([])
  resolve({
    li: res.data.slice(maxPage * (pageNum - 1), maxPage * (pageNum - 1) + maxPage).map(item => {
      item.price && (item.price = (item.price / 100).toFixed(2) + '元')
      return item
    }),
    total: Math.ceil(res.data.length / maxPage)
  })
})

// react思想，准备虚拟dom
const getDom = (data) =>
  `<a href="#" class="list-group-item list-group-item-action">
  <div class="d-flex w-100 justify-content-between">
    <h5 class="mb-1">${data.name} </h5>
    <small> ${data.price || '暂无价格'} </small>
  </div>
  <p class="mb-1">
    ${data.description}
  </p>
</a>`;
//设置最大页数
maxPage = 5
let total;
const prev = document.querySelector("#prev")
const next = document.querySelector("#next")
//设置分页按钮状态
function setBtn() {
  pageNum > 1 && prev.classList.contains('disabled') && prev.classList.remove('disabled')
  pageNum < total && next.classList.contains('disabled') && next.classList.remove('disabled')
  pageNum == 1 && !prev.classList.contains('disabled') && prev.classList.add('disabled')
  pageNum == total && !next.classList.contains('disabled') && next.classList.add('disabled')
}
//渲染函数
function setData(pageNum, maxPage) {
  getData(pageNum, maxPage).then(res => {
    document.querySelector('.list-group').innerHTML = res.li.map(item => getDom(item)).join("")
    total = res.total
    document.querySelector("#pagination").innerHTML = `共&nbsp;${res.total}&nbsp;页，当前&nbsp;${pageNum}&nbsp;页`
  })
}

// 点击上一页
prev.onclick = function () {
  // TODO：待补充代码
  if (pageNum == 1) return
  pageNum--
  setBtn()
  setData(pageNum, maxPage)
};
// 点击下一页
next.onclick = function () {
  // TODO：待补充代码
  const prev = document.querySelector("#prev")
  if (pageNum == total) return
  pageNum++
  setBtn()
  setData(pageNum, maxPage)
};
//进入页面执行一次
setData(pageNum, maxPage)
setBtn()