提示：本篇文章僅僅是作者自己目前在備賽藍橋杯中，自己學習與刷題的學習筆記，寫的不好，歡迎大家批評與建議

---

由于個別題目代碼量與題目量偏大，請大家自己去藍橋杯官網【連接高校和企業 - 藍橋云課】去尋找原題，在這里只提供部分原題代碼

本題目為：備賽藍橋杯之第十六屆模擬賽3期職業院校組

第十六屆藍橋杯（Web 應用開發）模擬賽 3 期-職業組 - 藍橋云課

---

題目1：跨屏變形記

需要考生作答的代碼段如下：

/* TODO:請補充代碼 *//* TODO:END */

題目要求：

請使用?CSS?的媒體查詢功能，為頁面實現移動端布局，具體實現如下：

• 頁面寬度小于?768px?時，頁面樣式如下：
  • 輪播圖（id="banner"）與新聞（id="news"）上下排列分布，都獨占一行，且寬度填充滿整個頁面。
  • 輪播圖（id="banner"）與新聞（id="news"）之間間隔?45px。

答案：

@media(max-width: 768px) {#container {flex-direction: column;}#banner {margin-bottom: 45px;width: 100%;}#news {width: 100%;}
}

?

本題作者想說

本題主要考察的知識：

1.css

2.css的媒體查詢

CSS的媒體查詢（Media Queries）是CSS3引入的一個非常有用的特性，它允許你根據不同的媒體類型（如屏幕、打印等）和特定的條件（如屏幕寬度、分辨率等）來應用不同的樣式規則。這樣，你可以為不同的設備或環境編寫特定的CSS代碼，從而實現響應式設計。

媒體查詢的基本語法如下：

@media not|only mediatype and (expressions) {CSS-Code;
}

not：排除某種媒體類型。

only：指定某種媒體類型，防止舊瀏覽器不支持帶媒體查詢的樣式時應用到所有設備。

mediatype：媒體類型，如screen（屏幕）、print（打印）等。

expressions：一個或多個表達式，用于測試特定的條件，如屏幕寬度、高度、分辨率等。

?本題要求對于“頁面寬度小于?768px?時”對頁面中的元素進行調整，那么首先要用@media(max-width: 768px)進行限制，此處我們設置當頁面最大寬度為768px時，也就是小于768px時，對下列元素進行css設置

• 輪播圖（id="banner"）與新聞（id="news"）上下排列分布，都獨占一行，且寬度填充滿整個頁面。
• 輪播圖（id="banner"）與新聞（id="news"）之間間隔?45px。

此處各個元素都是由id進行定義的，所以用css時要用“#”才可以，上下排布獨占一行，可以使用flex布局中的橫軸與交叉軸的定義，對頁面中元素進行縱向排布，flex-direction: column;寬度占滿整個頁面，則是子元素的設置，我們需要將子元素的id單獨拿出來進行css定義，并設置?width: 100%;要求輪播圖與新聞之間間隔45px，我們則采用外邊距的方式將二者隔開margin-bottom: 45px;最后結果如此

本題的判題程序可能出現問題，因此有些能實現效果的代碼也有可能不通過

---

題目2：垃圾分類

需要考生作答的代碼段如下：

        const garbagesorting = () => {// TODO：待補充代碼};

題目要求：

完善?index.html?中的?garbagesorting?方法。

點擊一鍵分類，把垃圾?waste?中的數據中的?txt?根據分類?type?依次放到對應的數組，對應的數組如下：

let food_waste = ref([]); //廚余垃圾
let recyclable_waste = ref([]); //可回收垃圾
let other_waste = ref([]); //其他垃圾
let harmful_waste = ref([]); //有害垃圾。

?

如?food_waste?最后的結果是?["剩菜剩飯", "骨頭", "菜根菜葉"]。

答案：

        const garbagesorting = () => {// TODO：待補充代碼waste.value.forEach(({type,txt})=>({廚余垃圾:food_waste,可回收垃圾:recyclable_waste,其他垃圾:other_waste,有害垃圾:harmful_waste})[type].value.push(txt))};

本題作者想說

本題主要考察的知識：

主要將已存在的數組按數組內部的屬性進行再分類

?本題主要是要求我們對waste中的垃圾屬性，按照垃圾類型一對一進行分類，既然涉及到了“一對一”那我們首先要想到循環遍歷，也就是將數組一個一個進行定義（forEach）

forEach 是 JavaScript 中數組的一個方法，用于對數組的每個元素執行一次提供的函數。它不會改變原數組，也不會返回任何值（即返回 undefined）。

以下是 forEach 方法的基本語法：

array.forEach(function(currentValue, index, arr), thisValue)

currentValue：當前正在處理的數組元素。

index（可選）：當前正在處理的數組元素的索引。

arr（可選）：正在被遍歷的數組本身。

thisValue（可選）：執行回調函數時用作 this 的值。

這個語法其實沒什么難的，最主要的就是要明白你要對那個進行循環操作，在本題中，我要對waste數組中的type與txt進行循環，這樣我們就要把這兩個屬性，作為一個整體的對象在foreach中展示

waste.value.forEach(({type,txt})=>()
)

?如此，我們明白了要把什么循環，之后就要考慮對要循環的東西怎么循環，根據題意，題目中已經把各個類型垃圾都已經做好了定義，那么我們要做的就是把該屬于這類的垃圾與watse中亂序的垃圾分類進行一一的映射，并根據類型的值將watse中的txt推送到其中

一一映射：在一一對應時，注意“，”的使用

              廚余垃圾:food_waste,可回收垃圾:recyclable_waste,其他垃圾:other_waste,有害垃圾:harmful_waste

根據類型（[type]）的值（.value）將watse中的txt推送到其中（.push(txt)?）最后結果如此

因此題的{}與（）過于多，所以需要答題者一定要注意foreach用到的符號與自己定義的對象符號，不要搞混

---

題目3：神奇的濾鏡

需要考生作答的代碼段如下：

filterTrigger.forEach(trigger => {// TODO：待補充代碼});

題目要求：

請在?js/index.js?文件中的 TODO 部分補充代碼實現需求，變量?filterTrigger?為所有濾鏡復選框元素。為復選框?.Header input?綁定選擇事件，當選擇某個復選框時，會彈出對應的濾鏡效果的彈窗（class="Filter"）。當選擇多個復選框時，濾鏡會進行疊加，通過調用以提供的?updateZIndex?函數將后選擇的濾鏡覆蓋在最上層。

例如：當勾選頁面中?data-filter-name="brightness"?對應的復選框時，與其對應的濾鏡彈窗（class="Filter" data-filter-name="brightness")將顯示在頁面中（注意，只能通過修改?display?屬性控制其顯隱）。

答案：

filterTrigger.forEach(trigger => {// TODO：待補充代碼document.querySelector('header').onchange = ({target}) => {filterTrigger.forEach((trigger,id) => {filters[id].style.display = trigger.checked ? 'block' : 'none'if(trigger===trigger){updateZIndex(filters[id])}})}
});

本題作者想說

本題主要考察的知識：

利用js尋找改變的元素，并利用循環遍歷與監聽器，持續不斷的判斷狀態以達到內部屬性的改變

?本題的代碼過于冗雜，這便更考到我們理解代碼的能力，首先我們要清楚filterTrigger?為控制所有濾鏡框的復選框元素，我們要做到當點擊頁面頭部的選項時，濾鏡框的復選框同時被選擇，同時可以顯示濾鏡框，trigger代表在循環時濾鏡框的另一種代指，濾鏡效果的彈窗（class="Filter"）即表示濾鏡框，但是值得注意的上述代碼const filters = document.querySelectorAll('.Filter');已經將.Filter變成了filters，所以filters為濾鏡框

首先找到頁面頭部的復選框是否被選中，并添加一個監聽器，使隨時可以監聽是否選擇

  document.querySelector('header').onchange = ({target})

這里target代表頭部復選框的另一種代指，之后我們首先有了前提條件復選框的控制選項，之后通過復選框選項再次循環對濾鏡框的復選框元素

=> {filterTrigger.forEach((trigger,id) => {}

與之前不同的是，我們把id也傳入進去，這樣編程就知道了誰被選擇了，之后我們就可以根據id將濾鏡框展示出來，另外多個展示框展示時，題目有明確要求使用updateZIndex（）函數放置上層

      filters[id].style.display = trigger.checked ? 'block' : 'none'if(trigger===trigger){updateZIndex(filters[id])}})

?如此便完成了

本題難點就難在了一層層的套環，一層層數據的傳遞

---

題目4：解密工具

需要考生作答的代碼段如下：

function getPossiblePasswords(max, count) { // TODO: 待補充代碼  }

題目要求：

完善?js/index.js?中的?getPossiblePasswords?函數，該函數接受兩個參數：

• max：密碼數組中的最大數字
• count：密碼數組的長度

該方法返回值為一個二維數組，里面包含所有的可能解密的數組。解密的數組從1開始，無需考慮二維數組中包含的數組順序以及密碼數組中數字的順序。即[[2,4],[3,4]]跟[[4,3],[4,2]]?是一樣的。

答案：

function getPossiblePasswords(max, count) {// TODO: 待補充代碼  const resultArr = []const handleArr = (start, res) => { if (res.length == count) {resultArr.push([...res])return}for (let i = start; i <= max; i++) { res.push(i)handleArr(i + 1, res) res.pop() }}handleArr(1, [])return resultArr
}

本題作者想說

本題主要考察的知識：

通過兩個數字的限制，生成符合排列組合的二維數組

本題其實就是讓答題人限制最大數與數組的個數，生成符合個數且最大數不超過限定的最大數的排列組合數組

定義一個數組用來存放最后的數組? ? const resultArr = []

之后我們再定義一個處理數組的方法，傳入start和res，start表示當前排列組合的起始數字，res是一個數組，用于存儲當前的排列組合。

const handleArr = (start, res) => {}

如果res數組的長度等于count，則將res數組的副本推入resultArr數組中，并返回

if (res.length == count) {resultArr.push([...res])return
}

?函數通過一個for循環遍歷從start到max的所有整數，對于每個整數i，將其推入res數組，然后遞歸調用handleArr函數，傳入i + 1作為新的start值，遞歸調用后，將res數組的最后一個元素彈出，以便嘗試下一個可能的排列組合

for (let i = start; i <= max; i++) { res.push(i)handleArr(i + 1, res) res.pop() 
}

之后我們用這個函數將1與空數組【】傳入，在處理之后，返回最后的數組

    handleArr(1, [])return resultArr

?如此便完成了，

---

感謝觀看此篇文章，謝謝大家的支持，本片文章只是我自己學習的歷程，有些寫的不好地方歡迎大家交流改動。

長路漫漫，我們還需努力！

?

?