前言：

因博主申請(qǐng)的線上考試所以留下了真題，本篇文章只有題目沒(méi)有答案(真題源碼資源在最后)，因博主技術(shù)有限(請(qǐng)理解一下)，博主只拿了省二

目錄

1. 電影院排座位

2.?圖??印?成:

3.??收集帛書(shū)碎?

4.??適應(yīng)??

5.??外賣(mài)給好評(píng)

6.?視頻彈幕?

7.?ISBN 轉(zhuǎn)換與?成

8.?全球新冠疫情數(shù)據(jù)統(tǒng)計(jì)

9.???架屏

10.?組課神器

真題源碼?

結(jié)語(yǔ)

1. 電影院排座位

介紹

隨著?們?活?平的?益提升，電影院成為了越來(lái)越多的?休閑娛樂(lè)，周末放松的好去處。各個(gè)城市的 電影院數(shù)量也隨著市場(chǎng)的需求逐年攀升。近?，?有?個(gè)電影院正在做著開(kāi)張前期的準(zhǔn)備，?藍(lán)作為設(shè) 計(jì)?程師，需要對(duì)電影院的座位進(jìn)?布局設(shè)計(jì)。 本題需要在已提供的基礎(chǔ)項(xiàng)?中，使? CSS 完成??中電影院座位布局。

準(zhǔn)備

開(kāi)始答題前，需要先打開(kāi)本題的項(xiàng)?代碼?件夾，?錄結(jié)構(gòu)如下：

├── css

│? ? ? └── style.css

└── index.html

其中： index.html 是主??。 css/style.css 是需要補(bǔ)充樣式的?件。 在瀏覽器中預(yù)覽 index.html ，顯示如下所示

?標(biāo)

請(qǐng)?jiān)?css/style.css ?件中的 TODO 下補(bǔ)全樣式代碼，最終達(dá)到預(yù)期布局效果，需要注意：

• ? 座位區(qū)域和熒幕間隔 50px。
• ? 座位區(qū)域每??包含 8 個(gè)座位。
• ? 第 2 列和第 6 列旁邊都是?廊，需要和下?列間隔 30px，其他列都只需要間隔? ? ? ?10px。

完成后的效果如下：

?規(guī)定

• ?請(qǐng)勿修改 css/style.css ?件外的任何內(nèi)容。
• ?請(qǐng)嚴(yán)格按照考試步驟操作，切勿修改考試默認(rèn)提供項(xiàng)?中的?件名稱、?件夾路徑、class名、id 名、圖?名等，以免造成判題?法通過(guò)。
• ?完成答題后，考?需將題?對(duì)應(yīng)代碼?件夾壓縮成 zip 格式后上傳提交，其他壓縮包格式為 0 分。

?判分標(biāo)準(zhǔn)

?本題完全實(shí)現(xiàn)題??標(biāo)得滿分，否則得 0 分。

2.?圖??印?成:

介紹

很多?站都會(huì)通過(guò)給圖?添加?印的形式來(lái)標(biāo)記圖?來(lái)源，維護(hù)版權(quán)。前端?成?印通常是通過(guò) canvas 實(shí)現(xiàn)，但實(shí)際上我們也可以直接利? CSS 來(lái)實(shí)現(xiàn)圖??印，這樣做會(huì)有更好的瀏覽器兼容 性。

本題中你將封裝?個(gè)創(chuàng)建?字?印的函數(shù)。

準(zhǔn)備

開(kāi)始答題前，需要先打開(kāi)本題的項(xiàng)?代碼?件夾，?錄結(jié)構(gòu)如下：

├── css

│? ? ? └── style.css

├── images

│? ? ? └── origin.png

├── index.html

└── js

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

? ? ? ?└── index.js

其中：

• index.html 是主??。
• css/style.css 是樣式?件。
• js/index.js 是需要補(bǔ)充代碼的 js ?件。
• js/dom-to-image.min.js 是?成圖?的第三?庫(kù)，此?件?需修改。
• images/origin.png 是項(xiàng)?中的原始圖??件。

在瀏覽器中預(yù)覽 index.html ??效果如下所示：

??標(biāo)

請(qǐng)完善 js/index.js ?件中的 TODO 部分，實(shí)現(xiàn)創(chuàng)建?印函數(shù)的功能 ，創(chuàng)建的?印需要使? <span>標(biāo)簽展示。

createWatermark 函數(shù)參數(shù)說(shuō)明：

?完成后的效果如下：

?規(guī)定

• 請(qǐng)嚴(yán)格按照考試步驟操作，切勿修改考試默認(rèn)提供項(xiàng)?中的?件名稱、?件夾路徑、class 名、id 名、圖?名等，以免造成判題?法通過(guò)。
• 完成答題后，考?需將題?對(duì)應(yīng)代碼?件夾壓縮成 zip 格式后上傳提交，其他壓縮包格式為 0 分。

判分標(biāo)準(zhǔn)

本題完全實(shí)現(xiàn)題??標(biāo)得滿分，否則得 0 分。

3.??收集帛書(shū)碎?

介紹

三叔在外出考古途中?意發(fā)現(xiàn)了?份戰(zhàn)國(guó)帛書(shū)，帛書(shū)邊緣有被明顯裁剪過(guò)的痕跡，單從帛書(shū)?段，提到 記錄了神秘?物的地點(diǎn)，?奈帛書(shū)不完整，為了早?將?物帶回博物館，三叔號(hào)召當(dāng)?shù)卮?悶油瓶、王 胖?、潘?共同尋找剩余帛書(shū)碎?，相約?炷?后再聚。

本題需要在已提供的基礎(chǔ)項(xiàng)?中使? JS 知識(shí)封裝?個(gè)函數(shù)，達(dá)到收集帛書(shū)碎?的要求。

準(zhǔn)備 開(kāi)始答題前，需要先打開(kāi)本題的項(xiàng)?代碼?件夾，?錄結(jié)構(gòu)如下：

├── js

│? ? ? └── collect-puzzle.js

├── css

│? ? ? └── style.css

├── images

└── index.html

其中：

• index.html 是主??。
• css/style.css 是樣式?件。
• images 是圖??件夾。
• js/collect-puzzle.js 是需要補(bǔ)充代碼的 js ?件。

在瀏覽器中預(yù)覽 index.html ??，顯示如下所示：

?目標(biāo)：

請(qǐng)?jiān)?collect-puzzle.js ?件中補(bǔ)全函數(shù) collectPuzzle 中的代碼，返回包含不同帛書(shū)碎?的數(shù) 組，最終拼出完整的戰(zhàn)國(guó)帛書(shū)，需要注意：

• 同?個(gè)?收集的帛書(shū)碎?可能是有重復(fù)的。
• 同?組內(nèi)不同的?收集的帛書(shū)碎?也可能是有重復(fù)的。
• ?具函數(shù)需要統(tǒng)計(jì)所有?獲取的不同帛書(shū)碎?，?不是帛書(shū)碎?數(shù)量。

例如：

?// 不同組內(nèi)的帛書(shū)碎?不能重復(fù)計(jì)算

var arr1 = ["災(zāi)變", "四時(shí)運(yùn)轉(zhuǎn)", "天象"];

var arr2 = ["四時(shí)運(yùn)轉(zhuǎn)"];

var result1 = collectPuzzle(arr1, arr2);

console.log(result1); // 輸出：["災(zāi)變","四時(shí)運(yùn)轉(zhuǎn)","天象"]

// 同?組內(nèi)的帛書(shū)碎?不能重復(fù)計(jì)算

var arr3 = ["災(zāi)變", "災(zāi)變", "天象"];

var arr4 = ["災(zāi)變", "?令禁忌", "天象"];

var result2 = collectPuzzle(arr3, arr4);

console.log(result2); // 輸出：["災(zāi)變", "天象","?令禁忌"]

上述僅為示例代碼，判題時(shí)會(huì)隨機(jī)提供數(shù)組對(duì)該函數(shù)功能進(jìn)?檢測(cè)。

在題?所提供的數(shù)據(jù)的情況下，點(diǎn)擊合成按鈕，完成后的效果如下：

?規(guī)定

• 請(qǐng)勿修改 collect-puzzle.js ?件外的任何內(nèi)容。
• 判題時(shí)會(huì)隨機(jī)提供數(shù)組對(duì)該函數(shù)功能進(jìn)?檢測(cè)，請(qǐng)保證函數(shù)的通?性，不能僅對(duì)測(cè)試數(shù)據(jù)有效。
• 請(qǐng)嚴(yán)格按照考試步驟操作，切勿修改考試默認(rèn)提供項(xiàng)?中的?件名稱、?件夾路徑、class 名、id 名、圖?名等，以免造成判題?法通過(guò)。
• 完成答題后，考?需將題?對(duì)應(yīng)代碼?件夾壓縮成 zip 格式后上傳提交，其他壓縮包格式為 0 分。

判分標(biāo)準(zhǔn)

?完全實(shí)現(xiàn)題??標(biāo)得滿分，否則得 0 分。

?4.??適應(yīng)??

介紹

響應(yīng)式布局是在 2010 年 5 ?份提出的?個(gè)概念，這個(gè)概念是為解決移動(dòng)互聯(lián)?瀏覽?誕?的。簡(jiǎn)?? 之，就是?個(gè)?站能夠兼容多個(gè)終端——?不是為每個(gè)終端做?個(gè)特定的版本。通過(guò)響應(yīng)式布局可以為 不同終端的?戶提供更加舒適的界?和更好的?戶體驗(yàn)，?且隨著?屏幕移動(dòng)設(shè)備的普及，?“?勢(shì)所 趨”來(lái)形容也不為過(guò)。因此越來(lái)越多的設(shè)計(jì)師采?這個(gè)技術(shù)。

本題需要在已提供的基礎(chǔ)項(xiàng)?中，使? CSS 或者 DOM 操作達(dá)到 Menu 和內(nèi)容??適應(yīng)的效果。

準(zhǔn)備

開(kāi)始答題前，需要先打開(kāi)本題的項(xiàng)?代碼?件夾，?錄結(jié)構(gòu)如下：

├── 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 是需要補(bǔ)充樣式的?件。
• js/jquery-3.6.0.min.js 是 jQuery 庫(kù)?件。
• images 是圖??件夾。
• default.gif 是 PC 端默認(rèn)效果圖。
• effect.gif 是移動(dòng)端?適應(yīng)效果圖。

在瀏覽器中預(yù)覽 index.html ??，默認(rèn) PC 端??顯示如下所示:

??標(biāo):

初始??已經(jīng)具備基礎(chǔ)的布局和交互效果，包含 hover ?亮，展示?級(jí)菜單等。效果??件夾下?的 gif 圖，圖?名稱為 default.gif （提示：可以通過(guò) VS Code 或者瀏覽器預(yù)覽 gif 圖?）。

請(qǐng)通過(guò)補(bǔ)全 css/style.css 中代碼或結(jié)合 jQuery 操作 DOM 的?式，達(dá)到根據(jù)屏幕??顯示不同布局 的效果。

• 以 800px 為界限， 800px 以上顯示 PC 端布局，否則顯示移動(dòng)端布局，需要實(shí)現(xiàn)移動(dòng)端布局樣式 如下：

? ? ? ?

• 移動(dòng)端 Menu 由左上側(cè)按鈕（即 class 包含 icon-menu 的 label 標(biāo)簽）控制顯隱，按鈕??已 經(jīng)默認(rèn)提供，?需?動(dòng)設(shè)置??。且 Menu 按鈕展示時(shí)，需要浮動(dòng)在內(nèi)容卡?上?，不能被遮擋， 移動(dòng)端和 PC 端頂部導(dǎo)航欄?度?致，均為 54px 。
• 移動(dòng)端導(dǎo)航欄的菜單項(xiàng)每?項(xiàng)獨(dú)占??。
• 顯示移動(dòng)端布局時(shí)，卡?描述和對(duì)應(yīng)圖?各占??，且都撐滿 #tutorials 容器。

移動(dòng)端??展開(kāi)菜單欄效果如下所示：

?最終效果可參考?件夾下?的 gif 圖，圖?名稱為 effect.gif（提示：可以通過(guò) VS Code 或者瀏覽器預(yù)覽 gif 圖?）。

考?可以根據(jù)需要使? jQuery 實(shí)現(xiàn)腳本控制，也可以只使?純 CSS 實(shí)現(xiàn)。

規(guī)定

• 請(qǐng)嚴(yán)格按照考試步驟操作，切勿修改考試默認(rèn)提供項(xiàng)?中的?件名稱、?件夾路徑、class 名、id 名、圖?名等，以免造成判題?法通過(guò)。
• 完成答題后，考?需將題?對(duì)應(yīng)代碼?件夾壓縮成 zip 格式后上傳提交，其他壓縮包格式為 0 分。

判分標(biāo)準(zhǔn)

本題完全實(shí)現(xiàn)題??標(biāo)得滿分，否則得 0 分。

5.??外賣(mài)給好評(píng)

介紹

外賣(mài)是現(xiàn)代?活中必備的?環(huán)。收到外賣(mài)后，各?平臺(tái)軟件常常會(huì)邀請(qǐng)?戶在?味，配送速度等多個(gè)? ?給與評(píng)分。在 element-ui 組件中，已經(jīng)有相應(yīng)的 Rate 組件，但是已有組件只能對(duì)單?維度進(jìn)?評(píng) 分，在外賣(mài)評(píng)分這種場(chǎng)景中，樣式基本上是固定的，功能也基本?樣。若每寫(xiě)?個(gè)??都要去復(fù)制?份 類(lèi)似代碼，就會(huì)產(chǎn)??量重復(fù)的代碼，既不利于后期的維護(hù)，代碼也不夠簡(jiǎn)潔。為此需要前端?程師對(duì) element-ui 的原 Rate 組件進(jìn)??次封裝。

準(zhǔn)備

開(kāi)始答題前，需要先打開(kāi)本題的項(xiàng)?代碼?件夾，?錄結(jié)構(gòu)如下：

├── 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 庫(kù)相關(guān)的腳本?件、樣式?件及字體。
• js ?件夾中存放的是 vue 及 http-vue-loader 庫(kù)相關(guān)?件。
• my-rate.vue 是待封裝的評(píng)分組件?件。
• effect.gif 是完成后的效果圖。

在瀏覽器中預(yù)覽 index.html ??，顯示如下所示：

??標(biāo)

請(qǐng)?jiān)?my-rate.vue ?件中補(bǔ)充代碼，具體要求如下：

• 1. my-rate.vue 組件能夠?qū)Σ煌木S度進(jìn)?評(píng)分。
• 2. my-rate.vue 組件對(duì)外拋出 change 事件，在三項(xiàng)評(píng)分均完成后，觸發(fā) change 事件， change 事件包含?個(gè)參數(shù)，?于傳遞改變后的分?jǐn)?shù)值，其類(lèi)型是對(duì)象，包含以下屬性： { speed: number; flavour: number; pack: number; }

最終效果可參考?件夾下?的 gif 圖，圖?名稱為 effect.gif（提示：可以通過(guò) VS Code 或者瀏覽器預(yù)覽 gif 圖?）。

實(shí)現(xiàn)該功能所需的 el-rate 組件 api 如下：

?規(guī)定

• 請(qǐng)勿修改 my-rate.vue ?件外的任何內(nèi)容。
• 請(qǐng)嚴(yán)格按照考試步驟操作，切勿修改考試默認(rèn)提供項(xiàng)?中的?件名稱、?件夾路徑、class 名、id 名、圖?名等，以免造成判題?法通過(guò)。
• 完成答題后，考?需將題?對(duì)應(yīng)代碼?件夾壓縮成 zip 格式后上傳提交，其他壓縮包格式為 0 分。

判分標(biāo)準(zhǔn)

完全實(shí)現(xiàn)題??標(biāo)得滿分，否則得 0 分。

6.?視頻彈幕?

介紹

彈幕指直接顯現(xiàn)在視頻上的評(píng)論，可以以滾動(dòng)、停留甚?更多動(dòng)作特效?式出現(xiàn)在視頻上，是觀看視頻 的?發(fā)送的簡(jiǎn)短評(píng)論。通過(guò)發(fā)送彈幕可以給觀眾?種“實(shí)時(shí)互動(dòng)”的錯(cuò)覺(jué)，彈幕的出現(xiàn)讓觀看過(guò)程充滿樂(lè) 趣。本題需要在已提供的基礎(chǔ)項(xiàng)?中，完成視頻彈幕的功能。

準(zhǔn)備

開(kāi)始答題前，需要先打開(kāi)本題的項(xiàng)?代碼?件夾，?錄結(jié)構(gòu)如下：

├── effect.gif

├── css

│? ? ? └── style.css

├── video

│? ? ? └── video1.webm

├── index.html

└── js

? ? ? ? └── index.js

在瀏覽器中預(yù)覽 index.html ??，顯示如下所示：

??標(biāo)

請(qǐng)?jiān)?js/index.js ?件中補(bǔ)全代碼。具體需求如下：

1. 補(bǔ)全 renderBullet 函數(shù)中的代碼，控制彈幕的顯示顏?和移動(dòng)。功能說(shuō)明如下：

• 每個(gè)彈幕內(nèi)容包裹在 span 標(biāo)簽中，作為?節(jié)點(diǎn)插?到 #video 元素節(jié)點(diǎn)內(nèi)。
• ?成的 span 元素節(jié)點(diǎn)相對(duì)于 #video 元素絕對(duì)定位 ，初始位置的 left 是 #video 元素的 寬， top 是 #video 元素的?內(nèi)的隨機(jī)數(shù)。 注意：需求中所需樣式可直接通過(guò)已提供的 getEleStyle ?法獲取。
• 彈幕每隔 bulletConfig.time （彈幕配置對(duì)象） 時(shí)間，向左移動(dòng)距離為 bulletConfig.speed （彈幕配置對(duì)象）。
• 當(dāng)彈幕最右端完全移出 #video 元素時(shí)，移除 span 元素。

2. 補(bǔ)全 #sendBulletBtn 元素的綁定事件，點(diǎn)擊發(fā)送按鈕，輸?框中的?字出現(xiàn)在彈幕中，樣式不 同于普通彈幕（樣式紅?字體紅?框已設(shè)置，類(lèi)名為 create-bullet ）。通過(guò)調(diào)? renderBullet ?法和正確的傳參實(shí)現(xiàn)功能。

最終效果可參考?件夾下?的 gif 圖，圖?名稱為 effect.gif（提示：可以通過(guò) VS Code 或者瀏覽器預(yù)覽 gif 圖?）。

規(guī)定

• 請(qǐng)勿修改 js/index.js ?件外的任何內(nèi)容。
• 請(qǐng)嚴(yán)格按照考試步驟操作，切勿修改考試默認(rèn)提供項(xiàng)?中的?件名稱、?件夾路徑、class 名、id 名、圖?名等，以免造成判題?法通過(guò)。
• 完成答題后，考?需將題?對(duì)應(yīng)代碼?件夾壓縮成 zip 格式后上傳提交，其他壓縮包格式為 0 分。

判分標(biāo)準(zhǔn)

本題完全實(shí)現(xiàn)題??標(biāo)得滿分，否則得 0 分

?7.?ISBN 轉(zhuǎn)換與?成

介紹

國(guó)際標(biāo)準(zhǔn)書(shū)號(hào)（International Standard Book Number），簡(jiǎn)稱 ISBN ，是專(zhuān)?為識(shí)別圖書(shū)等?獻(xiàn)?設(shè)計(jì) 的國(guó)際編號(hào)。2007 年 1 ? 1 ?之前，ISBN 由 10 位數(shù)字組成，包括四個(gè)部分：組號(hào)（國(guó)家、地區(qū)、語(yǔ) ?的代號(hào)），出版者號(hào)，書(shū)序號(hào)和檢驗(yàn)碼。2007 年 1 ? 1 ?起，實(shí)?新版 ISBN，新版 ISBN 由 13 位 數(shù)字組成。新版 ISBN 編碼增加了 EAN·UCC 前綴，這是為了與國(guó)際條形碼編碼 EAN·UCC 系統(tǒng)接軌。

本題請(qǐng)實(shí)現(xiàn)?個(gè) ISBN-10 （舊版 10 位 ISBN ）到 ISBN-13 （新版 13 位 ISBN ）碼的轉(zhuǎn)換?具。

準(zhǔn)備

開(kāi)始答題前，需要先打開(kāi)本題的項(xiàng)?代碼?件夾，?錄結(jié)構(gòu)如下：

├── 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 ?件夾內(nèi)包含了??使?的 icon。
• js/JsBarcode.ean-upc.min.js 是項(xiàng)?使?的條形碼?成庫(kù)。
• js/index.js 是?? js ?件。
• js/vue.min.js 是 vue ?件。
• effect.gif 是??最終的效果圖。

在瀏覽器中預(yù)覽 index.html ??效果如下

??標(biāo)：

請(qǐng)?jiān)?js/index.js ?件中補(bǔ)全代碼，具體需求如下：

?1. 補(bǔ)充 getNumbers 函數(shù)，剔除輸?參數(shù) str 中除了數(shù)字和?寫(xiě) X 之外的其他字符，將其轉(zhuǎn)? ? ? ?換為 只有純數(shù)字和?寫(xiě) X 字?的字符串。

?2. 補(bǔ)充 validISBN10 函數(shù)，判斷輸?參數(shù) isbn 是否是?個(gè)有效的 ISBN-10 字符串，并將判? ? ? ?斷結(jié) 果（ true 或 false ）返回。有效的 ISBN-10 判斷?法如下：

• ?有效的 ISBN-10 字符串是只有純數(shù)字和?寫(xiě) X 字?的字符串，其前九位是 0-9 之間的任意數(shù)字，最后?位校驗(yàn)位的值取決于前九位數(shù)字。
• 校驗(yàn)位計(jì)算?法：? 1-9 這 9 個(gè)數(shù)依次乘以前?的 9 位數(shù)，然后求它們的和除以 11 的余數(shù)。 如果余數(shù)為 10，則校驗(yàn)碼? X 表示，否則，校驗(yàn)碼?該余數(shù)表示。
• 以 7-5600-3879-4 為例，它的前 9 位數(shù)是 7、5、6、0、0、3、8、7、9，則其校驗(yàn)碼的計(jì)算 過(guò)程如下：

? ? ? ? 1x7+2x5+3x6+4x0+5x0+6x3+7x8+8x7+9x9

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

? ? ? ? = 246

? ? ? ? 246 % 11 = 4

? ? ? ? 因此，這個(gè) ISBN-10 字符串的校驗(yàn)碼就是4。

• ?以 2-5600-3879-X 為例，它的前 9 位數(shù)是 2、5、6、0、0、3、8、7、9，則其校驗(yàn)碼的計(jì)算 過(guò)程如下：

? ? ? ?1x2+2x5+3x6+4x0+5x0+6x3+7x8+8x7+9x9

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

? ? ? ?= 241 241 % 11

? ? ? ?= 10

? ? ? ?因此，這個(gè) ISBN-10 字符串的校驗(yàn)碼就是X。

?3. 補(bǔ)充 ISBN10To13 函數(shù)，將輸?參數(shù) isbn (?個(gè)有效的 ISBN-10 字符串) 轉(zhuǎn)化為對(duì)應(yīng)的? ? ? ? ? ?ISBN-13 字符串，并將轉(zhuǎn)化后的字符串返回。轉(zhuǎn)化步驟如下：

• 將 ISBN-10 字符串的最后?位校驗(yàn)位去掉，剩下前九個(gè)數(shù)字。
• 在字符串開(kāi)頭增加 978 三個(gè)數(shù)字，獲得?度為 12 的數(shù)字字符串。
• 計(jì)算最后?位校驗(yàn)位。 ISBN-13 的校驗(yàn)碼計(jì)算規(guī)則如下：?1分別乘書(shū)號(hào)的前12位中的奇數(shù) 位, ?3乘以偶數(shù)位，然后求它們的和除以10的余數(shù)，最后?10減去這個(gè)余數(shù)，就得到了校驗(yàn) 碼。如果余數(shù)為0，則校驗(yàn)碼為0。
• ?如，7-5600-3879-4 在 ISBN-13 中，就是 978-7-5600-3879-7。它的校驗(yàn)碼計(jì)算?法如 下：

? ? ? ?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

? ? ? 因此，這個(gè) ISBN-13 字符串的校驗(yàn)碼就是7。

下?是?個(gè)有效的 ISBN-10 號(hào)碼，可供測(cè)試??使?

• 7-5600-3879-4
• 0198534531
• 3 5982 1508 8

上述 3 個(gè)需求正確實(shí)現(xiàn)后??的最終效果??件夾下?的 gif 圖，圖?名稱為 effect.gif （提示：可 以通過(guò) VS Code 或者瀏覽器預(yù)覽 gif 圖?）。

規(guī)定

• 請(qǐng)嚴(yán)格按照考試步驟操作，切勿修改考試默認(rèn)提供項(xiàng)?中的?件名稱、?件夾路徑、class 名、id 名、圖?名等，以免造成判題?法通過(guò)。
• 完成答題后，考?需將題?對(duì)應(yīng)代碼?件夾壓縮成 zip 格式后上傳提交，其他壓縮包格式為 0 分。

判分標(biāo)準(zhǔn)

• 完成?標(biāo) 1，得 5 分
• 完成?標(biāo) 2，得 10 分
• 完成?標(biāo) 3，得 5 分

?8.?全球新冠疫情數(shù)據(jù)統(tǒng)計(jì)

介紹

新冠疫情席卷全球，在此期間有很多免費(fèi)的 API 和?站為?們提供了各個(gè)國(guó)家疫情數(shù)據(jù)的查詢功能，這 些免費(fèi)公開(kāi)的數(shù)據(jù)體現(xiàn)出了互聯(lián)?作為信息媒介的優(yōu)越性，幫助全球??更好的了解?線疫情信息。 本題請(qǐng)實(shí)現(xiàn)?個(gè)可以對(duì)各個(gè)國(guó)家的新冠疫情數(shù)據(jù)統(tǒng)計(jì)的??。

準(zhǔn)備

開(kāi)始答題前，需要先打開(kāi)本題的項(xiàng)?代碼?件夾，?錄結(jié)構(gòu)如下：

├── 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 是??所?到的新冠數(shù)據(jù)。
• effect.gif 是??最終的效果圖。

在瀏覽器中預(yù)覽 index.html ??效果如下：

?標(biāo)：

請(qǐng)?jiān)?index.html ?件中補(bǔ)全代碼，具體需求如下：

1. 在組件加載時(shí)利? axios 請(qǐng)求地址為 ./js/covid-data.json （必須使?該路徑請(qǐng)求，否則可能 會(huì)請(qǐng)求不到數(shù)據(jù)） ?件中的數(shù)據(jù)。并將所有國(guó)家名稱在 select 標(biāo)簽下的 option 元素進(jìn)?渲染 （保留默認(rèn)選項(xiàng) “Select Country”），效果如下

?covid-data.json 數(shù)據(jù)參數(shù)說(shuō)明：

?

?2. 當(dāng)?戶改變 select 篩選器的選擇時(shí)，根據(jù)?戶的選擇改變??中展示的國(guó)家名以及確診和死亡? 數(shù)數(shù)據(jù)。如果?戶沒(méi)有選擇任何國(guó)家，則展示默認(rèn)值 0 和默認(rèn)標(biāo)題 “請(qǐng)選擇國(guó)家”。以選擇法國(guó)為 例：

?3. ??底部的 ECharts 圖表希望顯示各個(gè)國(guó)家的累計(jì)確診?數(shù)，請(qǐng)修改 initChart 函數(shù)的內(nèi)容， 使得圖表 x 軸數(shù)據(jù)為國(guó)家簡(jiǎn)稱，y 軸數(shù)據(jù)為累計(jì)確診?數(shù)，效果如下：

?最終效果可參考?件夾下?的 gif 圖，圖?名稱為 effect.gif（提示：可以通過(guò) VS Code 或者瀏覽器預(yù)覽 gif 圖?）。

規(guī)定

• 請(qǐng)嚴(yán)格按照考試步驟操作，切勿修改考試默認(rèn)提供項(xiàng)?中的?件名稱、?件夾路徑、class 名、id 名、圖?名等，以免造成判題?法通過(guò)。
• 完成答題后，考?需將題?對(duì)應(yīng)代碼?件夾壓縮成 zip 格式后上傳提交，其他壓縮包格式為 0 分。

判分標(biāo)準(zhǔn)

• 完成?標(biāo) 1，得 5 分。
• 完成?標(biāo) 2，得 10 分。
• 完成?標(biāo) 3，得 5 分。

9.???架屏

介紹

在?絡(luò)較慢，需要?時(shí)間等待加載的情況下，?架屏可以在詳細(xì)??元素未展現(xiàn)時(shí)，把 DOM 結(jié)構(gòu)通過(guò) 簡(jiǎn)單的?塊或圓形勾勒出來(lái)，相對(duì)于傳統(tǒng)的轉(zhuǎn)圈等待與?屏來(lái)說(shuō)，?戶體驗(yàn)更好。下?請(qǐng)根據(jù)題?要 求，使? Vue 封裝?個(gè)靈活的?架屏組件。

準(zhǔn)備

開(kāi)始答題前，需要先打開(kāi)本題的項(xiàng)?代碼?件夾，?錄結(jié)構(gòu)如下：

├── 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 是存放項(xiàng)?依賴的?件夾。
• css 是存放項(xiàng)?樣式的?件夾。
• effect.gif 是項(xiàng)??標(biāo)完成效果圖。

在瀏覽器中預(yù)覽 index.html ??，顯示如下所示：

??標(biāo)：

找到 Skeleton/item.js 中的 TODO 部分，完成以下?標(biāo)：

1. 使? index.html 中傳遞過(guò)去的數(shù)據(jù) paragraph ，并結(jié)合 Vue 遞歸組件的知識(shí)，完成?架屏組件 的編寫(xiě)。

paragraph 中的屬性說(shuō)明如下：

?本題中的?架屏結(jié)構(gòu)圖及說(shuō)明如下：

• ?第??（標(biāo)記 1）為 1 個(gè)矩形占位。
• 第??（標(biāo)記 2）分為兩列（藍(lán)?框），左邊?列為三?組成，右邊?列為 1 個(gè)矩形占位。
• 第??左邊?列分別為如下構(gòu)成：第??（標(biāo)記 ①）為 1 個(gè)矩形占位，第??（標(biāo)記 ②）為 2 個(gè) 矩形占位，第三?（標(biāo)記 ③）為 4 個(gè)圓形+1 個(gè)矩形占位。

type 和 DOM 結(jié)構(gòu)的對(duì)應(yīng)關(guān)系如下：

<div class="ske-${type}-container">
  <div class="ske ske-${type}" :style="style">
     <!-- ...... 根據(jù)類(lèi)型判斷此處是否需要添加元素。TIPS: row ??可以繼續(xù)嵌套 row -->
  </div>
</div>

在上?的示例中：

• ${type} 的值為對(duì)應(yīng)的容器類(lèi)型 row 、 col 、 rect 或 circle 。
• style 表示 class="ske ske-${type}" 的元素對(duì)應(yīng)的樣式：

如果 ${type} 是 rect 或 circle 則使? style 屬性。其 DOM 結(jié)構(gòu)如下：

<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 中傳遞過(guò)去的數(shù)據(jù) active 完成?架屏組件的閃爍功能：如果 active 為 true , 則給容器類(lèi)型 type 為 rect （矩形）或 circle （圓形）的組件內(nèi)層class="ske ske-rect" 或 class="ske ske-circle" 的元素添加類(lèi)名 .ske-ani ；否則不添加。

最終效果可參考?件夾下?的 gif 圖，圖?名稱為 effect.gif （提示：可以通過(guò) VS Code 或者瀏覽 器預(yù)覽 gif 圖?）。

規(guī)定

• 請(qǐng)嚴(yán)格按照考試步驟操作，切勿修改考試默認(rèn)提供項(xiàng)?中的?件名稱、?件夾路徑、class 名、id 名、圖?名等，以免造成判題?法通過(guò)。
• 完成答題后，考?需將題?對(duì)應(yīng)代碼?件夾壓縮成 zip 格式后上傳提交，其他壓縮包格式為 0 分。

判分標(biāo)準(zhǔn)

本題完全實(shí)現(xiàn)題??標(biāo)得滿分，否則得 0 分

?10.?組課神器

介紹

在很多教育?站的平臺(tái)上，課程的章節(jié)?錄會(huì)使?樹(shù)型組件呈現(xiàn)，為了?便調(diào)整菜單，前端?程師會(huì)為 其賦予拖拽功能。本題需要在已提供的基礎(chǔ)項(xiàng)?中，完成可拖拽樹(shù)型組件的功能。

準(zhǔn)備

├── effect.gif

├── css

│? ? ? └── style.css

├── index.html

├── images

└── js

? ? ? ?├── data.json

? ? ? ?├── axios.min.js

? ? ? ?└── index.js

其中：

• index.html 是主??。
• images 是圖??件夾。
• js/index.js 是需要補(bǔ)充代碼的 js ?件。
• js/data.json 是存放數(shù)據(jù)的 json ?件。
• js/axios.min.js 是 axios ?件。
• css/style.css 是樣式?件。
• effect.gif 是完成的效果圖。

在瀏覽器中預(yù)覽 index.html ??，顯示如下所示

??標(biāo)

請(qǐng)?jiān)?js/index.js ?件中補(bǔ)全代碼。具體需求如下：

1. 補(bǔ)全 js/index.js ?件中 ajax 函數(shù)，功能為根據(jù)請(qǐng)求?式 method 不同，拿到樹(shù)型組件的數(shù) 據(jù)并返回。具體如下：

• 當(dāng) method === "get" 時(shí)，判斷 localStorage 中是否存在 key 為 data 的數(shù)據(jù)，若存在，則 從 localStorage 中直接獲取后處理為 json 格式并返回；若不存在則從 ./js/data.json （必須 使?該路徑請(qǐng)求，否則可能會(huì)請(qǐng)求不到數(shù)據(jù)）中使? ajax 獲取并返回。
• 當(dāng) method === "post" 時(shí)，將通過(guò)參數(shù) data 傳遞過(guò)來(lái)的數(shù)據(jù)轉(zhuǎn)化為 json 格式的字符串，并保 存到 localStorage 中， key 命名為 data 。

最終返回的數(shù)據(jù)格式如下：

[
{
"id": 1001,
"label": "第?章 Vue 初體驗(yàn)",
"children": [ ... ]
},
{
"id": 1006,
"label": "第?章 Vue 核?概念",
"children": [
{
"id": 1007,
"label": "2.1 概念理解",
"children": [
{
"id": 1008,
"label": "聊?聊虛擬 DOM",
"tag":"?檔 1"
},
...
]
},
{
"id": 1012,
"label": "2.2 Vue 基礎(chǔ)??",
"children": [
{
"id": 1013,
"label": "Vue 的基本語(yǔ)法",
"tag":"實(shí)驗(yàn) 6"
},
...
]
}
]
}
]

2. 補(bǔ)全 js/index.js ?件中的 treeMenusRender 函數(shù)，使?所傳參數(shù) data ?成指定 DOM 結(jié)構(gòu) 的模板字符串（完整的模板字符串的 HTML 樣例結(jié)構(gòu)可以在 index.html 中查看），并在包含 .tree-node 的元素節(jié)點(diǎn)上加上指定屬性如下：

3. 補(bǔ)全 js/index.js ?件中的 treeDataRefresh 函數(shù)，功能為：根據(jù)參數(shù)列表 { dragGrade, dragElementId }, { dropGrade, dropElementId } 重新?成拖拽后的樹(shù)型組件 數(shù)據(jù) treeData （ treeData 為全局變量，直接訪問(wèn)并根據(jù)參數(shù)處理后重新賦值即可）。

?便規(guī)則描述，現(xiàn)將 data.json 中的數(shù)據(jù)扁平化處理，得到的數(shù)據(jù)順序如下：

[
{ grade: "1", label: "第?章 Vue 初體驗(yàn)", id: "1001" },
{ grade: "2", label: "1.1 Vue 簡(jiǎn)介", id: "1002" },
{ grade: "3", label: "Vue 的發(fā)展歷程", id: "1003" },
{ grade: "3", label: "Vue 特點(diǎn)", 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 設(shè)計(jì)模式", id: "1010" },
{ grade: "3", label: "Vue 中的 MVVM 設(shè)計(jì)模式", id: "1011" }, // 即將被拖拽的元素節(jié)點(diǎn)
{ grade: "2", label: "2.2 Vue 基礎(chǔ)??", id: "1012" },
{ grade: "3", label: "Vue 的基本語(yǔ)法", id: "1013" },
{ grade: "3", label: "第?步，創(chuàng)建 Vue 應(yīng)?實(shí)例", id: "1014" },
];

拖拽前后的規(guī)則說(shuō)明如下：

• 情況?：若拖拽的節(jié)點(diǎn)和放置的節(jié)點(diǎn)為同級(jí)，即 treeDataRefresh 函數(shù)參數(shù)列表中 dragGrade == dropGrade ，則將 id == dragElementId （例如： 1011 ）的節(jié)點(diǎn)移動(dòng)到 id==dropElementId （例如： 1008 ）的節(jié)點(diǎn)后，作為其后第?個(gè)鄰近的兄弟節(jié)點(diǎn)。最終?成的數(shù) 據(jù)順序如下：

[
{ grade: "1", label: "第?章 Vue 初體驗(yàn)", id: "1001" },
{ grade: "2", label: "1.1 Vue 簡(jiǎn)介", id: "1002" },
{ grade: "3", label: "Vue 的發(fā)展歷程", id: "1003" },
{ grade: "3", label: "Vue 特點(diǎn)", 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" },
// 在?標(biāo)元素節(jié)點(diǎn)下?插?
{ grade: "3", label: "Vue 中的 MVVM 設(shè)計(jì)模式", id: "1011" },
{ grade: "3", label: "感受?下虛擬 DOM", id: "1009" },
{ grade: "3", label: "聊?聊 MVVM 設(shè)計(jì)模式", id: "1010" },
// 移除被拖拽的元素節(jié)點(diǎn)
{ grade: "2", label: "2.2 Vue 基礎(chǔ)??", id: "1012" },
{ grade: "3", label: "Vue 的基本語(yǔ)法", id: "1013" },
{ grade: "3", label: "第?步，創(chuàng)建 Vue 應(yīng)?實(shí)例", id: "1014" },
];

• 情況?：若拖拽的節(jié)點(diǎn)和放置的節(jié)點(diǎn)為上下級(jí)，即 treeDataRefresh 函數(shù)參數(shù)列表中 dragGrade - dropGrade == 1 ，則將 id == dragElementId （例如： 1011 ）的節(jié)點(diǎn)移動(dòng)到 id==dropElementId （例如： 1002 ）的節(jié)點(diǎn)下，并作為其第?個(gè)?節(jié)點(diǎn)。最終?成的數(shù)據(jù)順序如 下：

[
{ grade: "1", label: "第?章 Vue 初體驗(yàn)", id: "1001" },
{ grade: "2", label: "1.1 Vue 簡(jiǎn)介", id: "1002" },
// 在?標(biāo)元素節(jié)點(diǎn)下?插?
{ grade: "3", label: "Vue 中的 MVVM 設(shè)計(jì)模式", id: "1011" },
{ grade: "3", label: "Vue 的發(fā)展歷程", id: "1003" },
{ grade: "3", label: "Vue 特點(diǎn)", 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 設(shè)計(jì)模式", id: "1010" },
// 移除被拖拽的元素節(jié)點(diǎn)
{ grade: "2", label: "2.2 Vue 基礎(chǔ)??", id: "1012" },
{ grade: "3", label: "Vue 的基本語(yǔ)法", id: "1013" },
{ grade: "3", label: "第?步，創(chuàng)建 Vue 應(yīng)?實(shí)例", id: "1014" },
];

最終效果可參考?件夾下?的 gif 圖，圖?名稱為 effect.gif （提示：可以通過(guò) VS Code 或者瀏覽 器預(yù)覽 gif 圖?）

規(guī)定

• 請(qǐng)勿修改 js/index.js ?件外的任何內(nèi)容。
• 請(qǐng)嚴(yán)格按照考試步驟操作，切勿修改考試默認(rèn)提供項(xiàng)?中的?件名稱、?件夾路徑、class 名、id 名、圖?名等，以免造成判題?法通過(guò)。
• 完成答題后，考?需將題?對(duì)應(yīng)代碼?件夾壓縮成 zip 格式后上傳提交，其他壓縮包格式為 0 分。

判分標(biāo)準(zhǔn)

• 完成?標(biāo) 1，得 5 分。
• 完成?標(biāo) 2，得 10 分。
• 完成?標(biāo) 3，得 10 分。

真題源碼?

藍(lán)橋杯真題網(wǎng)盤(pán)地址：

鏈接：https://pan.baidu.com/s/1VuhCCC3z3BD1j3H_nW7dxQ?pwd=1234
提取碼：1234??

?結(jié)語(yǔ)

備賽一周發(fā)現(xiàn)臨時(shí)抱佛腳是不行的，基礎(chǔ)不牢地動(dòng)山搖，難題不會(huì)簡(jiǎn)單題把握不住，得不得獎(jiǎng)不重要，重要的是在這個(gè)過(guò)程中的收獲。博主是個(gè)專(zhuān)科的小菜雞，還希望各位大佬多多指教??????文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-454995.html

到了這里，關(guān)于2023年第十四屆藍(lán)橋杯Web應(yīng)用開(kāi)發(fā)(職業(yè)院校組)省賽真題的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！