第十五届蓝桥杯（Web 应用开发）模拟赛 2 期-大学组_15届蓝桥杯web模拟赛

1. 相不相等

var expectFn = function(val) {
  // TODO
  return{
  toBe:function (value){
    if(val===value){
      return true
    }else return "Not Equal"
  },
 notToBe:function (value){
    if(val!==value){
      return true
    }else return "Equal"
  }
  }
};

2. 三行情书

span {
    font-size: 20px;
    color: #837362;
    /* TODO：补充下面的代码 */
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
   
}
p {
    color: #837362;
    /* TODO：补充下面的代码 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

3. 电影院在线订票

目标

请在 js/script.js 文件中补全代码，最终实现订票功能。具体需求如下：

1. 实现异步数据读取和渲染功能，使用 axios 请求 ./data.json（必须使用该路径请求，否则可能会请求不到数据）的数据。
   • 将电影名字 name 渲染到 id 为 movie-name 的节点中。
   • 将电影售价 price 渲染到 id 为 movie-price 的节点中。
   • 将座位信息 seats 渲染到 id 为 seat-area 的节点中，二维数组中每一个子数组代表一行，0 代表没有被他人占位，1 代表已经被订购。

每一行生成的 DOM 节点格式如下：

<!-- 每一行节点都使用 row class 包裹 -->
<div class="row">
  <!-- 每个座位都具有 seat 的 class -->
  <div class="seat"></div>
  <!-- 如果座位被占了，则相应设置 occupied class -->
  <div class="seat occupied"></div>
  <!-- ...... -->
</div>

完成后的页面布局效果如下： 

1. 实现座位选择和总价计算的功能:
   • 被别人订过的座位不能再被选择。
   • 座位被选中后，状态更新，为相应的座位添加选中样式（即 selected），并更新已选择的座位数和总价。
   • 自己所选择的座位可以被取消，并更新已选择的座位数和总价。

完成后的效果见文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）： 

题解 

// 1.完成数据请求，生成电影名，价格以及座位情况
let data={}
axios.get('./data.json').then((res)=>{
      console.log(res);
      data=res.data
      movieNameNode.innerHTML=data.name
      moviePriceNode.innerHTML=data.price
      for(let i=0;i<data.seats.length;i++){
           let row= document.createElement('div')
           row.className='row'
           data.seats[i].forEach(element => {
            let seat= document.createElement('div')
            seat.className = 'seat'
            row.appendChild(seat)
            if(element){
                  seat.classList.add('occupied')
            }else{
                  seat.addEventListener('click',()=>{
                        if(seat.className=='seat selected'){
                              seat.classList.remove('selected')
                              num-=1
                              count.innerHTML=num
                              total.innerHTML=num*20
                        }else{
                              seat.classList.add('selected')
                              num+=1
                              count.innerHTML=num
                              total.innerHTML=num*20
                        }
                  })
            }
 
           });
           seatAreaNode.appendChild(row)
      }
})

4. 老虎机

目标

找到 js/index.js 中的 GetResult 函数，完成此函数，实现以下目标：

点击开始后，可以通过 GetResult的三个参数 r1、r2、r3 计算出滚动后每一列图片的停留位置。当最后停留的图片都相同时，意味着玩家中了大奖！文字框（class = textPanel）显示“恭喜你，中奖了”，否则显示：“很遗憾，未中奖”。

参数介绍：r1、r2、r3 表示的是三列元素下的 li 的最后停留位置，分别对应第一列（id=sevenFirst）、第二列（id=sevenSecond）、第三列（id=sevenThird）。以第一列为例，最终显示的元素是 sevenFirst 下的第 r 个 li 元素。请使用显示的 li 元素的 data-point 属性判断三张图片是否相同。当 data-point 属性对应的值相同时，说明这三张图片相同。

在完成之后，请点击“开始”按钮，以下是未中奖和中奖的效果：

题解 

// GetResult 中奖结果函数，r1,r2,r3 为最后图片停留位置，以第一列为例，最终显示的元素是 sevenFirst 下的第 r 个 li 元素。
  GetResult(r1, r2, r3) {
    // TODO 待补充代码
     //.getAttribute('data-point') 是获取指定子元素的名为 'data-point' 的属性的值。
    if (sevenFirst.children[r1 - 1].getAttribute('data-point') == sevenSecond.children[r2 - 1].getAttribute('data-point') && sevenFirst.children[r1 - 1].getAttribute('data-point') == sevenThird.children[r3 - 1].getAttribute('data-point')) {
      textPanel.innerHTML = '恭喜你，中奖了'
    } else {
      textPanel.innerHTML = '很遗憾，未中奖'
    }
  }

5. 星际通讯

目标

完善 index.js 中的 translate 函数，完善其中的 TODO 部分：

translate 函数接收一个字符串参数 alienMessage，其中包含一系列外星人的密文。函数根据特定的翻译规则将密文翻译成人类语言，并返回翻译后的结果字符串。外星人密文翻译规则存放在 codonTable 变量中。

注意：翻译后的结果字符串之间不能有空格。

特殊条件：

• 密文如果为空，直接返回空字符串。
• 如果密文任意一处无法翻译或遇到找不到对应翻译的密文，则返回字符串无效密语。
• 如果密文中出现了特殊密文对应的翻译结果是 stop，则停止翻译，返回之前已翻译的结果（不包括对应 stop 的密文）

以下为提供部分测试用例，通过测试用例不代表通过全部测试，请确保代码的通用性：

const translate = (alienMessage) => {
  // TODO：待补充代码
  let str=''
  if(alienMessage.length===0){
    console.log(alienMessage.length);
    return str;
  }else{
    for(let i=0;i<alienMessage.length;i+=3){
      let key=alienMessage.slice(i,i+3)
      if(codonTable[key]){
        if(key!='XXI'){
          str+=codonTable[key]
        }else{
          return str
        }
      }else{
        return '无效密语'
      }
    }
  }
  return str
};

6. 蓝桥排位赛

目标

请在 js/index.js 文件中补全代码，具体需求如下：

1. 完成数据请求（数据来源 ./mock/map.json），map.json 中存放的数据为省市对应的学校数据，使用到的字段介绍如下：

1. 根据请求的数据正确完成左侧热力地图。
2. 右侧战力榜中柱形图中，根据 power 字段的值对所有学校进行排序，取出排在前 10 名的学校，从左到右降序排列。

• 完成后运行起来，效果如下：

题解

 onMounted(() => {
      // TODO:待补充代码 请求数据，并正确渲染柱形图和地图
      let mapar=[]
      let barshow=[]
      showChartBar();
      showChinaMap();
      axios.get("./mock/map.json").then(res=>{
       let das=res.data
       das.forEach(e=>{
        let maps={
          name:e.name,
          school_count:e.school_count,
          value:e.value
        }
        mapar.push(maps)
        barshow.push(e.school_power)
       })
      //  console.log(mapar);
      })
      let barshow2=barshow.flat()
      // barshow2.reverse()
      console.log(barshow2);
      let result2=[]
      let result3=[]
      for(let i=0;i<10;i++){
        result2.push(barshow2[i].name)
        result3.push(barshow2[1].power)
      }
      showChinaMap(mapar)
    });

7. 拼出一个未来

目标

完善 js/index.js 的 TODO 部分，实现以下目标：

1. 将拖动的拼图块与目标拼图块的图片进行交换，这包括交换图片的 src 属性和 data-id 属性。待补充代码的 drop 函数中现有的两个变量解释如下：draggedPiece：代表被拖动的拼图块的图片元素的父元素。this：代表当前目标位置的拼图块的图片元素父元素。

拼图成功后的 DOM 如下，图片 src、alt、data-id 均按照 1-9 顺序排列

<div class="puzzle-container" id="puzzle-container">
  <div class="puzzle-piece" draggable="true">
    <img src="./images/img1.png"  data-id="1" />
  </div>
  <div class="puzzle-piece" draggable="true">
    <img src="./images/img2.png"  data-id="2" />
  </div>
  <!-- ... 省略部分代码 -->
  <div class="puzzle-piece" draggable="true">
    <img src="./images/img9.png"  data-id="9" />
  </div>
</div>

1. 显示/隐藏成功消息：拼图成功则设置成功消息元素（id=success-message）的 class 名为 show，否则该元素的 class 名为 hide。（注意：成功消息元素同时有且只能有一个 class 名）

完成后效果如下：