14届蓝桥杯web职高院校组省赛真题解析

---

目录

1.电影院排座位

2.图片水印生成

3.收集帛书碎片

4. ⾃适应⻚⾯

5.  外卖给好评

6. 视频弹幕

7. ISBN转换与⽣成 

8. 全球新冠疫情数据统计 

9.  ⻣架屏

10. 组课神器  

---

 1.电影院排座位

介绍

随着⼈们⽣活⽔平的⽇益提升，电影院成为了越来越多的⼈休闲娱乐，周末放松的好去处。各个城市的 电影院数量也随着市场的需求逐年攀升。近⽇，⼜有⼀个电影院正在做着开张前期的准备，⼩蓝作为设 计⼯程师，需要对电影院的座位进⾏布局设计。 本题需要在已提供的基础项⽬中，使⽤ CSS 完成⻚⾯中电影院座位布局。

准备

开始答题前，需要先打开本题的项⽬代码⽂件夹，⽬录结构如下：

├── css

│      └── style.css

└── index.html

其中： index.html 是主⻚⾯。 css/style.css 是需要补充样式的⽂件。 在浏览器中预览 index.html ，显示如下所示

⽬标

请在 css/style.css ⽂件中的 TODO 下补全样式代码，最终达到预期布局效果，需要注意：

  座位区域和荧幕间隔 50px。
  座位区域每⼀⾏包含 8 个座位。
  第 2 列和第 6 列旁边都是⾛廊，需要和下⼀列间隔 30px，其他列都只需要间隔       10px。
完成后的效果如下：

       

 规定

 请勿修改 css/style.css ⽂件外的任何内容。
 请严格按照考试步骤操作，切勿修改考试默认提供项⽬中的⽂件名称、⽂件夹路径、class名、id 名、图⽚名等，以免造成判题⽆法通过。
 完成答题后，考⽣需将题⽬对应代码⽂件夹压缩成 zip 格式后上传提交，其他压缩包格式为 0 分。
 判分标准

 本题完全实现题⽬⽬标得满分，否则得 0 分。

/* TODO：待补充代码 */

/* 弹性布局 */
.seat-area{
  display: flex;
  flex-wrap: wrap;
  margin-top: 40px;
}

.seat{
  margin-left: 10px;
  margin-top: 10px;
}

.seat:nth-child(8N + 1){
  margin-left: 0;
}

.seat:nth-child(8N + 2){
  margin-right: 20px;
}

.seat:nth-child(8N + 7){
  margin-left: 30px;
}

运行结果：

2.图片水印生成

介绍

很多⽹站都会通过给图⽚添加⽔印的形式来标记图⽚来源，维护版权。前端⽣成⽔印通常是通过 canvas 实现，但实际上我们也可以直接利⽤ CSS 来实现图⽚⽔印，这样做会有更好的浏览器兼容 性。

本题中你将封装⼀个创建⽂字⽔印的函数。

准备

开始答题前，需要先打开本题的项⽬代码⽂件夹，⽬录结构如下：

├── css

│      └── style.css

├── images

│      └── origin.png

├── index.html

└── js

       ├── dom-to-image.min.js

       └── index.js

其中：

index.html 是主⻚⾯。
css/style.css 是样式⽂件。
js/index.js 是需要补充代码的 js ⽂件。
js/dom-to-image.min.js 是⽣成图⽚的第三⽅库，此⽂件⽆需修改。
images/origin.png 是项⽬中的原始图⽚⽂件。
在浏览器中预览 index.html ⻚⾯效果如下所示：

 ⽬标

请完善 js/index.js ⽂件中的 TODO 部分，实现创建⽔印函数的功能 ，创建的⽔印需要使⽤ <span>标签展示。

createWatermark 函数参数说明：

 完成后的效果如下：

 规定

请严格按照考试步骤操作，切勿修改考试默认提供项⽬中的⽂件名称、⽂件夹路径、class 名、id 名、图⽚名等，以免造成判题⽆法通过。
完成答题后，考⽣需将题⽬对应代码⽂件夹压缩成 zip 格式后上传提交，其他压缩包格式为 0 分。
判分标准

本题完全实现题⽬⽬标得满分，否则得 0 分。

/**
 * 创建一个文字水印的div
 * @param  {string} text - 水印文字
 * @param  {string} color - 水印颜色
 * @param  {number} deg - 水印旋转角度
 * @param  {number} opacity - 水印透明度
 * @param  {number} count - 水印数量
 */
function createWatermark(text, color, deg, opacity, count) {
  // 创建水印容器
  const container = document.createElement("div");
  container.className = "watermark";
  // TODO: 根据输入参数创建文字水印
  for(let i=0;i<count;i++){
    container.innerHTML += `<span style="color:${color};transform:rotate(${deg}deg);opacity:${opacity};">${text}</span>`;
  }
  return container;
  
}

3.收集帛书碎片

介绍

三叔在外出考古途中⽆意发现了⼀份战国帛书，帛书边缘有被明显裁剪过的痕迹，单从帛书⽚段，提到 记录了神秘⽂物的地点，⽆奈帛书不完整，为了早⽇将⽂物带回博物馆，三叔号召当地村⺠闷油瓶、王 胖⼦、潘⼦共同寻找剩余帛书碎⽚，相约⼀炷⾹后再聚。

本题需要在已提供的基础项⽬中使⽤ JS 知识封装⼀个函数，达到收集帛书碎⽚的要求。

准备 开始答题前，需要先打开本题的项⽬代码⽂件夹，⽬录结构如下：

├── js

│      └── collect-puzzle.js

├── css

│      └── style.css

├── images

└── index.html

其中：

index.html 是主⻚⾯。
css/style.css 是样式⽂件。
images 是图⽚⽂件夹。
js/collect-puzzle.js 是需要补充代码的 js ⽂件。
在浏览器中预览 index.html ⻚⾯，显示如下所示：

 目标：

请在 collect-puzzle.js ⽂件中补全函数 collectPuzzle 中的代码，返回包含不同帛书碎⽚的数 组，最终拼出完整的战国帛书，需要注意：

同⼀个⼈收集的帛书碎⽚可能是有重复的。
同⼀组内不同的⼈收集的帛书碎⽚也可能是有重复的。
⼯具函数需要统计所有⼈获取的不同帛书碎⽚，⽽不是帛书碎⽚数量。
例如：

 // 不同组内的帛书碎⽚不能重复计算

var arr1 = ["灾变", "四时运转", "天象"];

var arr2 = ["四时运转"];

var result1 = collectPuzzle(arr1, arr2);

console.log(result1); // 输出：["灾变","四时运转","天象"]

// 同⼀组内的帛书碎⽚不能重复计算

var arr3 = ["灾变", "灾变", "天象"];

var arr4 = ["灾变", "⽉令禁忌", "天象"];

var result2 = collectPuzzle(arr3, arr4);

console.log(result2); // 输出：["灾变", "天象","⽉令禁忌"]

上述仅为示例代码，判题时会随机提供数组对该函数功能进⾏检测。

在题⽬所提供的数据的情况下，点击合成按钮，完成后的效果如下：

 规定

请勿修改 collect-puzzle.js ⽂件外的任何内容。
判题时会随机提供数组对该函数功能进⾏检测，请保证函数的通⽤性，不能仅对测试数据有效。
请严格按照考试步骤操作，切勿修改考试默认提供项⽬中的⽂件名称、⽂件夹路径、class 名、id 名、图⽚名等，以免造成判题⽆法通过。
完成答题后，考⽣需将题⽬对应代码⽂件夹压缩成 zip 格式后上传提交，其他压缩包格式为 0 分。
判分标准

 完全实现题⽬⽬标得满分，否则得 0 分。

function collectPuzzle(...puzzles) {
  // TODO: 在这里写入具体的实现逻辑
 let result = []
 for(let i=0;i<puzzles.length;i++){
  result.push(...puzzles[i])
 }
 
 result = [...new Set(result)]  //去重

 return result
}

 4. ⾃适应⻚⾯

介绍

响应式布局是在 2010 年 5 ⽉份提出的⼀个概念，这个概念是为解决移动互联⽹浏览⽽诞⽣的。简⽽⾔ 之，就是⼀个⽹站能够兼容多个终端——⽽不是为每个终端做⼀个特定的版本。通过响应式布局可以为 不同终端的⽤户提供更加舒适的界⾯和更好的⽤户体验，⽽且随着⼤屏幕移动设备的普及，⽤“⼤势所 趋”来形容也不为过。因此越来越多的设计师采⽤这个技术。

本题需要在已提供的基础项⽬中，使⽤ CSS 或者 DOM 操作达到 Menu 和内容⻚⾃适应的效果。

准备

开始答题前，需要先打开本题的项⽬代码⽂件夹，⽬录结构如下：

├── css

│      └── style.css

├── images

│      ├── C++_course.png

│      ├── linux_course.png

│      └── python_course.png

├── index.html

├─── js

│        └── jquery-3.6.0.min.js

├── default.gif

└── effect.gif

其中：

index.html 是主⻚⾯。
css/style.css 是需要补充样式的⽂件。
js/jquery-3.6.0.min.js 是 jQuery 库⽂件。
images 是图⽚⽂件夹。
default.gif 是 PC 端默认效果图。
effect.gif 是移动端⾃适应效果图。
在浏览器中预览 index.html ⻚⾯，默认 PC 端⻚⾯显示如下所示:

 ⽬标:

初始⻚⾯已经具备基础的布局和交互效果，包含 hover ⾼亮，展示⼆级菜单等。效果⻅⽂件夹下⾯的 gif 图，图⽚名称为 default.gif （提示：可以通过 VS Code 或者浏览器预览 gif 图⽚）。

请通过补全 css/style.css 中代码或结合 jQuery 操作 DOM 的⽅式，达到根据屏幕⼤⼩显示不同布局 的效果。

以 800px 为界限， 800px 以上显示 PC 端布局，否则显示移动端布局，需要实现移动端布局样式 如下：
       

移动端 Menu 由左上侧按钮（即 class 包含 icon-menu 的 label 标签）控制显隐，按钮⼤⼩已 经默认提供，⽆需⼿动设置⼤⼩。且 Menu 按钮展示时，需要浮动在内容卡⽚上⽅，不能被遮挡， 移动端和 PC 端顶部导航栏⾼度⼀致，均为 54px 。
移动端导航栏的菜单项每⼀项独占⼀⾏。
显示移动端布局时，卡⽚描述和对应图⽚各占⼀⾏，且都撑满 #tutorials 容器。
移动端⻚⾯展开菜单栏效果如下所示：

 最终效果可参考⽂件夹下⾯的 gif 图，图⽚名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图⽚）。

考⽣可以根据需要使⽤ jQuery 实现脚本控制，也可以只使⽤纯 CSS 实现。

规定

请严格按照考试步骤操作，切勿修改考试默认提供项⽬中的⽂件名称、⽂件夹路径、class 名、id 名、图⽚名等，以免造成判题⽆法通过。
完成答题后，考⽣需将题⽬对应代码⽂件夹压缩成 zip 格式后上传提交，其他压缩包格式为 0 分。
判分标准

本题完全实现题⽬⽬标得满分，否则得 0 分。

/* TODO：待补充代码 */
@media (max-width : 800px) {
  input.menu-btn,
  input[type="checkbox"].menu-btn ~ .collapse{
    display: block;
  }

  label.menu-btn{
    color: #959595;
    cursor: pointer;
    display: block;
    padding: 16px 32px;
  }

  label.menu-btn:hover{
    color: #fff;
  }

  .menu li{
    display: block;
  }

  .collapse{
    position: absolute;
    background: #252525;
    width: 100%;
  }

  .dropdown ul{
    position: relative;
  }

  .row{
    display: block;
  }

  #tutorials img{
    width: 100%;
    margin: 0;
  }
}

 5.  外卖给好评

介绍

外卖是现代⽣活中必备的⼀环。收到外卖后，各⼤平台软件常常会邀请⽤户在⼝味，配送速度等多个⽅ ⾯给与评分。在 element-ui 组件中，已经有相应的 Rate 组件，但是已有组件只能对单⼀维度进⾏评 分，在外卖评分这种场景中，样式基本上是固定的，功能也基本⼀样。若每写⼀个⻚⾯都要去复制⼀份 类似代码，就会产⽣⼤量重复的代码，既不利于后期的维护，代码也不够简洁。为此需要前端⼯程师对 element-ui 的原 Rate 组件进⾏⼆次封装。

准备

开始答题前，需要先打开本题的项⽬代码⽂件夹，⽬录结构如下：

├── element-ui-2.6.2

│      ├── element-icons.ttf

│      ├── element-icons.woff

│      ├── element-ui.min.js

│      └── element-ui.style.min.css

├── index.html

├── js

│      ├── http-vue-loader.min.js

│      └── vue.min.js

├── my-rate.vue

└── effect.gif

其中：

index.html 是主⻚⾯。
element-ui-2.6.2 ⽂件夹中存放的是 element-ui 库相关的脚本⽂件、样式⽂件及字体。
js ⽂件夹中存放的是 vue 及 http-vue-loader 库相关⽂件。
my-rate.vue 是待封装的评分组件⽂件。
effect.gif 是完成后的效果图。
在浏览器中预览 index.html ⻚⾯，显示如下所示：

 ⽬标

请在 my-rate.vue ⽂件中补充代码，具体要求如下：

1. my-rate.vue 组件能够对不同的维度进⾏评分。
2. my-rate.vue 组件对外抛出 change 事件，在三项评分均完成后，触发 change 事件， change 事件包含⼀个参数，⽤于传递改变后的分数值，其类型是对象，包含以下属性： { speed: number; flavour: number; pack: number; }
最终效果可参考⽂件夹下⾯的 gif 图，图⽚名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图⽚）。

实现该功能所需的 el-rate 组件 api 如下：

 规定

请勿修改 my-rate.vue ⽂件外的任何内容。
请严格按照考试步骤操作，切勿修改考试默认提供项⽬中的⽂件名称、⽂件夹路径、class 名、id 名、图⽚名等，以免造成判题⽆法通过。
完成答题后，考⽣需将题⽬对应代码⽂件夹压缩成 zip 格式后上传提交，其他压缩包格式为 0 分。
判分标准

完全实现题⽬⽬标得满分，否则得 0 分。

<!-- TODO: 补全 el-rate 属性 -->
<li>
   送餐速度：<el-rate v-model="speed" show-score></el-rate>
</li>
<li >
   <!-- TODO: 补全 el-rate 属性 -->
   外卖口味：<el-rate v-model="flavour" show-score></el-rate>
</li>
<li>
   <!-- TODO: 补全 el-rate 属性 -->
   外卖包装：<el-rate v-model="pack" show-score></el-rate>
</li>

module.exports = {
  data() {
    return {
      speed: 0, // 送餐速度
      flavour: 0, // 外卖口味
      pack: 0, // 外卖包装
    };
  },
  /* TODO：待补充代码 */
  updated(){
    if(this.checkRateFinished()){
      this.emitRateChange()
    }
  },
  methods:{
    checkRateFinished(){
      return this.speed !==0 && this.flavour !==0 && this.pack !==0
    },
    emitRateChange(){
      this.$emit('change',{
        speed:this.speed,
        flavour:this.flavour,
        pack:this.pack
      })
    }
  }
};

6. 视频弹幕

介绍

弹幕指直接显现在视频上的评论，可以以滚动、停留甚⾄更多动作特效⽅式出现在视频上，是观看视频 的⼈发送的简短评论。通过发送弹幕可以给观众⼀种“实时互动”的错觉，弹幕的出现让观看过程充满乐 趣。本题需要在已提供的基础项⽬中，完成视频弹幕的功能。

准备

开始答题前，需要先打开本题的项⽬代码⽂件夹，⽬录结构如下：

├── effect.gif

├── css

│      └── style.css

├── video

│      └── video1.webm

├── index.html

└── js

        └── index.js

在浏览器中预览 index.html ⻚⾯，显示如下所示：

 ⽬标

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

1. 补全 renderBullet 函数中的代码，控制弹幕的显示颜⾊和移动。功能说明如下：

每个弹幕内容包裹在 span 标签中，作为⼦节点插⼊到 #video 元素节点内。
⽣成的 span 元素节点相对于 #video 元素绝对定位 ，初始位置的 left 是 #video 元素的 宽， top 是 #video 元素的⾼内的随机数。 注意：需求中所需样式可直接通过已提供的 getEleStyle ⽅法获取。
弹幕每隔 bulletConfig.time （弹幕配置对象） 时间，向左移动距离为 bulletConfig.speed （弹幕配置对象）。
当弹幕最右端完全移出 #video 元素时，移除 span 元素。
2. 补全 #sendBulletBtn 元素的绑定事件，点击发送按钮，输⼊框中的⽂字出现在弹幕中，样式不 同于普通弹幕（样式红⾊字体红⾊框已设置，类名为 create-bullet ）。通过调⽤ renderBullet ⽅法和正确的传参实现功能。

最终效果可参考⽂件夹下⾯的 gif 图，图⽚名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图⽚）。

规定

请勿修改 js/index.js ⽂件外的任何内容。
请严格按照考试步骤操作，切勿修改考试默认提供项⽬中的⽂件名称、⽂件夹路径、class 名、id 名、图⽚名等，以免造成判题⽆法通过。
完成答题后，考⽣需将题⽬对应代码⽂件夹压缩成 zip 格式后上传提交，其他压缩包格式为 0 分。
判分标准

本题完全实现题⽬⽬标得满分，否则得 0 分
 

/**
 * @description 根据 bulletConfig 配置在 videoEle 元素最右边生成弹幕，并移动到最左边，弹幕最后消失
 * @param {Object} bulletConfig 弹幕配置
 * @param {Element} videoEle 视频元素
 * @param {boolean} isCreate 是否为新增发送的弹幕，为 true 表示为新增的弹幕
 *
 */
function renderBullet(bulletConfig, videoEle, isCreate = false) {
  const spanEle = document.createElement("SPAN");
  spanEle.classList.add(`bullet${index}`);
  if (isCreate) {
    spanEle.classList.add("create-bullet");
  }
  // TODO：控制弹幕的显示颜色和移动，每隔 bulletConfig.time 时间，弹幕移动的距离  bulletConfig.speed
  spanEle.innerHTML = bulletConfig.value

  spanEle.style.display = 'block'

  let {width:vwidth, height:vheight} = getEleStyle(videoEle)

  spanEle.style.left = vwidth+'px'
  spanEle.style.top = getRandomNum(vheight)+'px'

  videoEle.appendChild(spanEle)

  let timer = setInterval(()=>{
      spanEle.style.left = parseInt(spanEle.style.left) - bulletConfig.speed+'px'
      if(parseInt(spanEle.style.left) <= -64){
        if(spanEle){
          videoEle.removeChild(spanEle)
        }
        clearInterval(timer)
      }
  },bulletConfig.time)
}

document.querySelector("#sendBulletBtn").addEventListener("click", () => {
  // TODO:点击发送按钮，输入框中的文字出现在弹幕中
  let val = document.querySelector('#bulletContent').value;
  renderBullet({
    ...bulletConfig,
    isCreate:true,
    value:val,
  },
    videoEle,
    true
  )
  document.querySelector('#bulletContent').value = ''
});

 7. ISBN转换与⽣成 

介绍

国际标准书号（International Standard Book Number），简称 ISBN ，是专⻔为识别图书等⽂献⽽设计 的国际编号。2007 年 1 ⽉ 1 ⽇之前，ISBN 由 10 位数字组成，包括四个部分：组号（国家、地区、语 ⾔的代号），出版者号，书序号和检验码。2007 年 1 ⽉ 1 ⽇起，实⾏新版 ISBN，新版 ISBN 由 13 位 数字组成。新版 ISBN 编码增加了 EAN·UCC 前缀，这是为了与国际条形码编码 EAN·UCC 系统接轨。

本题请实现⼀个 ISBN-10 （旧版 10 位 ISBN ）到 ISBN-13 （新版 13 位 ISBN ）码的转换⼯具。

准备

开始答题前，需要先打开本题的项⽬代码⽂件夹，⽬录结构如下：

├── css

│     └── style.css

├── effect.gif

├── images

│      ├── check-one.png

│      ├── close-one.png

│      └── fail-picture.png

├── index.html

└── js

       ├── JsBarcode.ean-upc.min.js

       ├── index.js

       └── vue.min.js

其中：

css/style.css 是样式⽂件。
index.html 是主⻚⾯。
images ⽂件夹内包含了⻚⾯使⽤的 icon。
js/JsBarcode.ean-upc.min.js 是项⽬使⽤的条形码⽣成库。
js/index.js 是⻚⾯ js ⽂件。
js/vue.min.js 是 vue ⽂件。
effect.gif 是⻚⾯最终的效果图。
在浏览器中预览 index.html ⻚⾯效果如下

 ⽬标：

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

 1. 补充 getNumbers 函数，剔除输⼊参数 str 中除了数字和⼤写 X 之外的其他字符，将其转       换为 只有纯数字和⼤写 X 字⺟的字符串。

 2. 补充 validISBN10 函数，判断输⼊参数 isbn 是否是⼀个有效的 ISBN-10 字符串，并将判       断结 果（ true 或 false ）返回。有效的 ISBN-10 判断⽅法如下：

 有效的 ISBN-10 字符串是只有纯数字和⼤写 X 字⺟的字符串，其前九位是 0-9 之间的任意数字，最后⼀位校验位的值取决于前九位数字。
校验位计算⽅法：⽤ 1-9 这 9 个数依次乘以前⾯的 9 位数，然后求它们的和除以 11 的余数。 如果余数为 10，则校验码⽤ X 表示，否则，校验码⽤该余数表示。
以 7-5600-3879-4 为例，它的前 9 位数是 7、5、6、0、0、3、8、7、9，则其校验码的计算 过程如下：
        1x7+2x5+3x6+4x0+5x0+6x3+7x8+8x7+9x9

        = 7+10+18+0+0+18+56+56+81

        = 246

        246 % 11 = 4

        因此，这个 ISBN-10 字符串的校验码就是4。

 以 2-5600-3879-X 为例，它的前 9 位数是 2、5、6、0、0、3、8、7、9，则其校验码的计算 过程如下：
       1x2+2x5+3x6+4x0+5x0+6x3+7x8+8x7+9x9

       = 2+10+18+0+0+18+56+56+81

       = 241 241 % 11

       = 10

       因此，这个 ISBN-10 字符串的校验码就是X。

 3. 补充 ISBN10To13 函数，将输⼊参数 isbn (⼀个有效的 ISBN-10 字符串) 转化为对应的           ISBN-13 字符串，并将转化后的字符串返回。转化步骤如下：

将 ISBN-10 字符串的最后⼀位校验位去掉，剩下前九个数字。
在字符串开头增加 978 三个数字，获得⻓度为 12 的数字字符串。
计算最后⼀位校验位。 ISBN-13 的校验码计算规则如下：⽤1分别乘书号的前12位中的奇数 位, ⽤3乘以偶数位，然后求它们的和除以10的余数，最后⽤10减去这个余数，就得到了校验 码。如果余数为0，则校验码为0。
⽐如，7-5600-3879-4 在 ISBN-13 中，就是 978-7-5600-3879-7。它的校验码计算⽅法如 下：
       9x1+7x3+8x1+7x3+5x1+6x3+0x1+0x3+3x1+8x3+7x1+9x3

       = 9+21+8+21+5+18+0+0+3+24+7+27

       = 143

       143 % 10 = 3

       10 - 3 = 7

      因此，这个 ISBN-13 字符串的校验码就是7。

下⾯是⼏个有效的 ISBN-10 号码，可供测试⻚⾯使⽤

7-5600-3879-4
0198534531
3 5982 1508 8
上述 3 个需求正确实现后⻚⾯的最终效果⻅⽂件夹下⾯的 gif 图，图⽚名称为 effect.gif （提示：可 以通过 VS Code 或者浏览器预览 gif 图⽚）。

规定

请严格按照考试步骤操作，切勿修改考试默认提供项⽬中的⽂件名称、⽂件夹路径、class 名、id 名、图⽚名等，以免造成判题⽆法通过。
完成答题后，考⽣需将题⽬对应代码⽂件夹压缩成 zip 格式后上传提交，其他压缩包格式为 0 分。
判分标准

完成⽬标 1，得 5 分
完成⽬标 2，得 10 分
完成⽬标 3，得 5 分

// 将用户输入的带分隔符的 isbn 字符串转换只有纯数字和大写 X 字母的字符串
// 入参 str 为转换为包含任意字符的字符串
function getNumbers(str) {
  // TODO: 待补充代码
  return str.replace(/[^0-9X]/g,"").toUpperCase()
}

// 验证当前 ISBN10 字符串是否有效
// 入参 str 为待判断的只有纯数字和大写 X 字母的字符串
function validISBN10(str) {
  // TODO: 待补充代码
  if(str.length !== 10){
    return false
  }
  let pre = str.slice(0,9);
  let last = 0;

  for(let i=0;i<pre.length;i++){
    last += (i+1)*parseInt(pre[i])
  }
  last %= 11

  if(last === 10){
    last = "X"
  }
  if(str.slice(-1) == last){
    return true
  }else{
    return false
  }
}

// 将用户输入的 ISBN-10 字符串转化为 ISBN-13 字符串
// 入参 isbn 为有效的 ISBN-10 字符串
function ISBN10To13(isbn) {
  // TODO: 待补充代码
  let pre = "978" + isbn.slice(0,9)
  let last = 0
  for(let i=0;i<pre.length;i++){
    if(i%2 === 0){
      last += parseInt(pre[i])
    }else{
      last += parseInt(pre[i])*3
    }
  }
pre += last % 10 !== 0 ? 10-(last%10) : 0
return pre
}

 8. 全球新冠疫情数据统计 

介绍

新冠疫情席卷全球，在此期间有很多免费的 API 和⽹站为⼈们提供了各个国家疫情数据的查询功能，这 些免费公开的数据体现出了互联⽹作为信息媒介的优越性，帮助全球⼈⺠更好的了解⼀线疫情信息。 本题请实现⼀个可以对各个国家的新冠疫情数据统计的⻚⾯。

准备

开始答题前，需要先打开本题的项⽬代码⽂件夹，⽬录结构如下：

├── css

│ └── style.css

├── effect.gif

├── index.html

└── js

       ├── axios.min.js

       ├── covid-data.json

       ├── echarts.min.js

       └── vue.min.js

其中：

css/style.css 是样式⽂件。
index.html 是主⻚⾯。
js/axios.min.js 是 axios ⽂件。
js/vue.min.js 是 vue2.x ⽂件。
js/echarts.min.js 是 echarts ⽂件。
js/covid-data.json 是⻚⾯所⽤到的新冠数据。
effect.gif 是⻚⾯最终的效果图。
在浏览器中预览 index.html ⻚⾯效果如下：

⽬标：

请在 index.html ⽂件中补全代码，具体需求如下：

1. 在组件加载时利⽤ axios 请求地址为 ./js/covid-data.json （必须使⽤该路径请求，否则可能 会请求不到数据） ⽂件中的数据。并将所有国家名称在 select 标签下的 option 元素进⾏渲染 （保留默认选项 “Select Country”），效果如下

 covid-data.json 数据参数说明：

 

 2. 当⽤户改变 select 筛选器的选择时，根据⽤户的选择改变⻚⾯中展示的国家名以及确诊和死亡⼈ 数数据。如果⽤户没有选择任何国家，则展示默认值 0 和默认标题 “请选择国家”。以选择法国为 例：

 3. ⻚⾯底部的 ECharts 图表希望显示各个国家的累计确诊⼈数，请修改 initChart 函数的内容， 使得图表 x 轴数据为国家简称，y 轴数据为累计确诊⼈数，效果如下：

 最终效果可参考⽂件夹下⾯的 gif 图，图⽚名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图⽚）。

规定

请严格按照考试步骤操作，切勿修改考试默认提供项⽬中的⽂件名称、⽂件夹路径、class 名、id 名、图⽚名等，以免造成判题⽆法通过。
完成答题后，考⽣需将题⽬对应代码⽂件夹压缩成 zip 格式后上传提交，其他压缩包格式为 0 分。
判分标准

完成⽬标 1，得 5 分。
完成⽬标 2，得 10 分。
完成⽬标 3，得 5 分。

<!-- TODO: 请修改以下代码实现不同国家的数据展示功能 -->
        <div class="title">
          <h2>请选择国家</h2>
        </div>
        <div class="boxes">
          <div class="box1">
            <h3>确诊</h3>
            <div class="number">
              <span class="font-bold">新增:</span>
              {{currentData ? currentData.NewConfirmed : 0 }}
            </div>
            <div class="number">
              <span class="font-bold">总计:</span>
              {{currentData ? currentData.TotalConfirmed : 0 }}
             
            </div>
          </div>
          <div class="box2">
            <h3>死亡</h3>
            <div class="number">
              <span class="font-bold">新增:</span>
              {{currentData ? currentData.NewDeaths : 0 }}
              
            </div>
            <div class="number">
              <span class="font-bold">总计:</span>
              {{currentData ? currentData.TotalDeaths : 0 }}
              
            </div>
          </div>
        </div>
        <select v-model="currentCountry" @change="selectChange">
          <option value="">Select Country</option>
          <!-- 请在此渲染所有国家选项 -->
          <option v-for="country in countries" :key="country" :value="country">{{ country }}</option>
        </select>

<script>
    var vm = new Vue({
      el: "#app",
      data:{
        countries:[],
        allData:[],
        Xdata:[],
        Ydata:[],
        currentData:null,
        currentCountry:''
      },
      methods: {
        // TODO: 请修改该函数代码实现题目要求
        initChart() {
          // 初始化图表
          this.chart = echarts.init(document.getElementById("chart"));
          this.chartOptions = {
            title: {
              text: "全球感染人数前30国家累计确诊人数统计",
              x: "center",
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
                label: {
                  show: true,
                },
              },
            },
            // 设置x轴数据
            xAxis: {
              // 这里需要显示国家名称缩写，因为有些国家的全称太长，会导致界面不美观
              data: this.Xdata,
              axisLabel: {
                show: true,
                interval: 0,
              },
            },
            yAxis: {
              type: "value",
              name: "确诊数量",
            },
            // 设置y轴数据
            series: [
              {
                data: this.Ydata,
                type: "bar",
                itemStyle: {
                  normal: {
                    color: "#a90000",
                  },
                },
              },
            ],
          };
          // 调用此方法设置 echarts 数据
          this.chart.setOption(this.chartOptions);
        },
        selectChange(){
          if(this.currentCountry != ''){
            this.allData.forEach(item => {
              if(item.Country === this.currentCountry){
                this.currentData = item
              }
            });
          }else{
            this.currentCountry = null
          }
        }
      },
      // TODO: 请在此添加代码实现组件加载时数据请求的功能
      mounted() {
        axios.get("./js/covid-data.json").then(res=>{
          this.countries = res.data.map(item=>item.Country)
          this.allData = res.data
          this.Xdata = res.data.map(item=>item.CountryCode)
          this.Ydata = res.data.map(item=>item.TotalConfirmed)
          console.log(this.allData)
          this.initChart();
        })
      },
    });
  </script>

9.  ⻣架屏

介绍

在⽹络较慢，需要⻓时间等待加载的情况下，⻣架屏可以在详细⻚⾯元素未展现时，把 DOM 结构通过 简单的⽅块或圆形勾勒出来，相对于传统的转圈等待与⽩屏来说，⽤户体验更好。下⾯请根据题⽬要 求，使⽤ Vue 封装⼀个灵活的⻣架屏组件。

准备

开始答题前，需要先打开本题的项⽬代码⽂件夹，⽬录结构如下：

├── components

│     ├── List

│     │      ├── content.js

│     │      └── index.js

│     └── Skeleton

│             ├── index.js

│             └── item.js

├── css

│      └── style.css

├── effect.gif

├── index.html

└── js

        └── vue.min.js

其中：

index.html 是主⻚⾯。
components/list 是提供的列表组件。
components/Skeleton 是⻣架屏组件。
js 是存放项⽬依赖的⽂件夹。
css 是存放项⽬样式的⽂件夹。
effect.gif 是项⽬⽬标完成效果图。
在浏览器中预览 index.html ⻚⾯，显示如下所示：

 ⽬标：

找到 Skeleton/item.js 中的 TODO 部分，完成以下⽬标：

1. 使⽤ index.html 中传递过去的数据 paragraph ，并结合 Vue 递归组件的知识，完成⻣架屏组件 的编写。

paragraph 中的属性说明如下：

 本题中的⻣架屏结构图及说明如下：

 第⼀⾏（标记 1）为 1 个矩形占位。
第⼆⾏（标记 2）分为两列（蓝⾊框），左边⼀列为三⾏组成，右边⼀列为 1 个矩形占位。
第⼆⾏左边⼀列分别为如下构成：第⼀⾏（标记 ①）为 1 个矩形占位，第⼆⾏（标记 ②）为 2 个 矩形占位，第三⾏（标记 ③）为 4 个圆形+1 个矩形占位。
type 和 DOM 结构的对应关系如下：

<div class="ske-${type}-container">
  <div class="ske ske-${type}" :style="style">
     <!-- ...... 根据类型判断此处是否需要添加元素。TIPS: row ⾥⾯可以继续嵌套 row -->
  </div>
</div>
在上⾯的示例中：

${type} 的值为对应的容器类型 row 、 col 、 rect 或 circle 。
style 表示 class="ske ske-${type}" 的元素对应的样式：
如果 ${type} 是 rect 或 circle 则使⽤ style 属性。其 DOM 结构如下：

<div class="ske-rect-container">
  <div class="ske ske-rect" :style="style"></div>
</div>
rows/cols 以及 rowStyle/colStyle 使⽤示例如下：

<!-- rowStyle/colStyle 使⽤示例 -->
<div class="ske ske-row" :style="row.rowStyle" v-for="row in paragraph.rows">
  <!--此处代码省略...-->
</div>
2. 使⽤ index.html 中传递过去的数据 active 完成⻣架屏组件的闪烁功能：如果 active 为 true , 则给容器类型 type 为 rect （矩形）或 circle （圆形）的组件内层class="ske ske-rect" 或 class="ske ske-circle" 的元素添加类名 .ske-ani ；否则不添加。

最终效果可参考⽂件夹下⾯的 gif 图，图⽚名称为 effect.gif （提示：可以通过 VS Code 或者浏览 器预览 gif 图⽚）。

规定

请严格按照考试步骤操作，切勿修改考试默认提供项⽬中的⽂件名称、⽂件夹路径、class 名、id 名、图⽚名等，以免造成判题⽆法通过。
完成答题后，考⽣需将题⽬对应代码⽂件夹压缩成 zip 格式后上传提交，其他压缩包格式为 0 分。
判分标准

本题完全实现题⽬⽬标得满分，否则得 0 分

let ItemTemplate = ``;
// TODO: 请补充完整Template，完成组件代码编写
ItemTemplate =`<div>
<div v-if="paragraph.type === 'row'" class="ske-row-container">
<div class="ske ske-row" :style="row.rowstyle" v-for="row in paragraph.rows">
<!--递归调用1tem组件来渲染子节点，传递row和act1ve属性-->
<item paragraph="row" :active="active"></item>
</div>
</div>
<div v-else-if="paragraph.type ==='col'" class="ske-col-container">
<div class="ske ske-col" :style="col.colstyle" v-for="col in paragraph.cols">
<!-一递归调用1tem组件来渲染子节点，传递co1和active属性-->
<item :paragraph="col" :active="active"></item>
</d1v>
</div>
<div v-else-if="paragraph.type =='rect'" class="ske-rect-container">
<!-一以矩形形式渲染当前节点-一>
<div class="ske ske-rect" :class="['ske-ani':active)" :style="paragraph.style"></div>
</div>
<div v-else-if="paragraph.type ==='circle'" class="ske-circle-container">
<!-一以圆形形式宣染当前节点一>
<div class="ske ske-circle" :class="{'ske-ani':active)" :style="paragraph.style"></div>
</div>
</div>
`

10. 组课神器  

介绍

在很多教育⽹站的平台上，课程的章节⽬录会使⽤树型组件呈现，为了⽅便调整菜单，前端⼯程师会为 其赋予拖拽功能。本题需要在已提供的基础项⽬中，完成可拖拽树型组件的功能。

准备

├── effect.gif

├── css

│      └── style.css

├── index.html

├── images

└── js

       ├── data.json

       ├── axios.min.js

       └── index.js

其中：

index.html 是主⻚⾯。
images 是图⽚⽂件夹。
js/index.js 是需要补充代码的 js ⽂件。
js/data.json 是存放数据的 json ⽂件。
js/axios.min.js 是 axios ⽂件。
css/style.css 是样式⽂件。
effect.gif 是完成的效果图。
在浏览器中预览 index.html ⻚⾯，显示如下所示

 ⽬标

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

1. 补全 js/index.js ⽂件中 ajax 函数，功能为根据请求⽅式 method 不同，拿到树型组件的数 据并返回。具体如下：

当 method === "get" 时，判断 localStorage 中是否存在 key 为 data 的数据，若存在，则 从 localStorage 中直接获取后处理为 json 格式并返回；若不存在则从 ./js/data.json （必须 使⽤该路径请求，否则可能会请求不到数据）中使⽤ ajax 获取并返回。
当 method === "post" 时，将通过参数 data 传递过来的数据转化为 json 格式的字符串，并保 存到 localStorage 中， key 命名为 data 。
最终返回的数据格式如下：

[
{
"id": 1001,
"label": "第⼀章 Vue 初体验",
"children": [ ... ]
},
{
"id": 1006,
"label": "第⼆章 Vue 核⼼概念",
"children": [
{
"id": 1007,
"label": "2.1 概念理解",
"children": [
{
"id": 1008,
"label": "聊⼀聊虚拟 DOM",
"tag":"⽂档 1"
},
...
]
},
{
"id": 1012,
"label": "2.2 Vue 基础⼊⻔",
"children": [
{
"id": 1013,
"label": "Vue 的基本语法",
"tag":"实验 6"
},
...
]
}
]
}
]

2. 补全 js/index.js ⽂件中的 treeMenusRender 函数，使⽤所传参数 data ⽣成指定 DOM 结构 的模板字符串（完整的模板字符串的 HTML 样例结构可以在 index.html 中查看），并在包含 .tree-node 的元素节点上加上指定属性如下：

3. 补全 js/index.js ⽂件中的 treeDataRefresh 函数，功能为：根据参数列表 { dragGrade, dragElementId }, { dropGrade, dropElementId } 重新⽣成拖拽后的树型组件 数据 treeData （ treeData 为全局变量，直接访问并根据参数处理后重新赋值即可）。

⽅便规则描述，现将 data.json 中的数据扁平化处理，得到的数据顺序如下：

[
{ grade: "1", label: "第⼀章 Vue 初体验", id: "1001" },
{ grade: "2", label: "1.1 Vue 简介", id: "1002" },
{ grade: "3", label: "Vue 的发展历程", id: "1003" },
{ grade: "3", label: "Vue 特点", id: "1004" },
{ grade: "3", label: "⼀分钟上⼿ Vue", id: "1005" },
{ grade: "1", label: "第⼆章 Vue 核⼼概念", id: "1006" },
{ grade: "2", label: "2.1 概念理解", id: "1007" },
{ grade: "3", label: "聊⼀聊虚拟 DOM", id: "1008" },
{ grade: "3", label: "感受⼀下虚拟 DOM", id: "1009" },
{ grade: "3", label: "聊⼀聊 MVVM 设计模式", id: "1010" },
{ grade: "3", label: "Vue 中的 MVVM 设计模式", id: "1011" }, // 即将被拖拽的元素节点
{ grade: "2", label: "2.2 Vue 基础⼊⻔", id: "1012" },
{ grade: "3", label: "Vue 的基本语法", id: "1013" },
{ grade: "3", label: "第⼀步，创建 Vue 应⽤实例", id: "1014" },
];

拖拽前后的规则说明如下：

情况⼀：若拖拽的节点和放置的节点为同级，即 treeDataRefresh 函数参数列表中 dragGrade == dropGrade ，则将 id == dragElementId （例如： 1011 ）的节点移动到 id==dropElementId （例如： 1008 ）的节点后，作为其后第⼀个邻近的兄弟节点。最终⽣成的数 据顺序如下：
[
{ grade: "1", label: "第⼀章 Vue 初体验", id: "1001" },
{ grade: "2", label: "1.1 Vue 简介", id: "1002" },
{ grade: "3", label: "Vue 的发展历程", id: "1003" },
{ grade: "3", label: "Vue 特点", id: "1004" },
{ grade: "3", label: "⼀分钟上⼿ Vue", id: "1005" },
{ grade: "1", label: "第⼆章 Vue 核⼼概念", id: "1006" },
{ grade: "2", label: "2.1 概念理解", id: "1007" },
{ grade: "3", label: "聊⼀聊虚拟 DOM", id: "1008" },
// 在⽬标元素节点下⽅插⼊
{ grade: "3", label: "Vue 中的 MVVM 设计模式", id: "1011" },
{ grade: "3", label: "感受⼀下虚拟 DOM", id: "1009" },
{ grade: "3", label: "聊⼀聊 MVVM 设计模式", id: "1010" },
// 移除被拖拽的元素节点
{ grade: "2", label: "2.2 Vue 基础⼊⻔", id: "1012" },
{ grade: "3", label: "Vue 的基本语法", id: "1013" },
{ grade: "3", label: "第⼀步，创建 Vue 应⽤实例", id: "1014" },
];

情况⼆：若拖拽的节点和放置的节点为上下级，即 treeDataRefresh 函数参数列表中 dragGrade - dropGrade == 1 ，则将 id == dragElementId （例如： 1011 ）的节点移动到 id==dropElementId （例如： 1002 ）的节点下，并作为其第⼀个⼦节点。最终⽣成的数据顺序如 下：
[
{ grade: "1", label: "第⼀章 Vue 初体验", id: "1001" },
{ grade: "2", label: "1.1 Vue 简介", id: "1002" },
// 在⽬标元素节点下⽅插⼊
{ grade: "3", label: "Vue 中的 MVVM 设计模式", id: "1011" },
{ grade: "3", label: "Vue 的发展历程", id: "1003" },
{ grade: "3", label: "Vue 特点", id: "1004" },
{ grade: "3", label: "⼀分钟上⼿ Vue", id: "1005" },
{ grade: "1", label: "第⼆章 Vue 核⼼概念", id: "1006" },
{ grade: "2", label: "2.1 概念理解", id: "1007" },
{ grade: "3", label: "聊⼀聊虚拟 DOM", id: "1008" },
{ grade: "3", label: "感受⼀下虚拟 DOM", id: "1009" },
{ grade: "3", label: "聊⼀聊 MVVM 设计模式", id: "1010" },
// 移除被拖拽的元素节点
{ grade: "2", label: "2.2 Vue 基础⼊⻔", id: "1012" },
{ grade: "3", label: "Vue 的基本语法", id: "1013" },
{ grade: "3", label: "第⼀步，创建 Vue 应⽤实例", id: "1014" },
];

最终效果可参考⽂件夹下⾯的 gif 图，图⽚名称为 effect.gif （提示：可以通过 VS Code 或者浏览 器预览 gif 图⽚）

规定

请勿修改 js/index.js ⽂件外的任何内容。
请严格按照考试步骤操作，切勿修改考试默认提供项⽬中的⽂件名称、⽂件夹路径、class 名、id 名、图⽚名等，以免造成判题⽆法通过。
完成答题后，考⽣需将题⽬对应代码⽂件夹压缩成 zip 格式后上传提交，其他压缩包格式为 0 分。
判分标准

完成⽬标 1，得 5 分。
完成⽬标 2，得 10 分。
完成⽬标 3，得 10 分。

 

 

---

 结语：赛后复盘才发现题目确实还行，除了最后一题实在是不理解。上面最后一题代码是蓝桥杯官方真题详解的答案，仅供参考