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

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

  
  
  
  



  

  

    

      

        

          蓝桥知识网
        
        

          首页
          热门技术
          使用手册
          知识库
          练习题
          联系我们
          更多
        
      
      

        
蓝桥云课
        
随时随地丰富你的技术栈！
        
加入我们
      
    
  
  

    

      

        

          
人工智能
          
人工智能亦称智械、机器智能，指由人制造出来的机器所表现出来的智能。通常人工智能是指通过普通计算机程序来呈现人类智能的技术。
        
        

          
后端开发
          
后端开发是实现页面的交互逻辑，通过使用后端语言来实现页面的操作功能，例如登录、注册等。
        
      
      

        

          
前端开发
          
前端开发是创建 WEB 页面或 APP 等前端界面呈现给用户的过程，通过 HTML，CSS 及 JavaScript
            以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。
          
        
        

          
信息安全
          
ISO（国际标准化组织）的定义为：为数据处理系统建立和采用的技术、管理上的安全保护，为的是保护计算机硬件、软件、数据不因偶然和恶意的原因而遭到破坏、更改和泄露。
        
      
    
  
  

    

      
© 蓝桥云课 2022
      
京公网安备 11010102005690 号 | 京 ICP 备 2021029920 号
    
  

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分)

  
  
  
  
  



  

    
    

      
      
    
    

    

      

         
      
    

    

      

         
        
{{i.title}}
      
    

  

08购物车(20分)

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 `

  
${item.name}
  ${(item.price / 100).toFixed(2)}元

${item.description}
`
}

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 = `共 ${maxPage} 页，当前 ${pageNum} 页`
}

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) =>
  `
  

    
${data.name} 
     ${data.price || '暂无价格'} 
  
  

    ${data.description}
  
`;
//设置最大页数
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 = `共 ${res.total} 页，当前 ${pageNum} 页`
  })
}

// 点击上一页
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()