[程式碼&DEMO] [HackMD完整筆記]
當在頁面輸入了完整的“密碼”(一串預先定義好的字串)後,會顯示Cornify特效。
STEP1 宣告變數
宣告一個空的陣列,用來存使用者輸入的字串。
宣告一個變數,用來放預設密碼。
const pressed = [],
secretCode = 'helloworld'
STEP2 addEventListener
加上鍵盤的 keyup 事件監聽,用箭頭函數的參數來接收事件。
(注意此處的 keyup 事件是針對頁面的,在 Console 面板中並不會觸發。)
window.addEventListener('keyup', (e) => { })
STEP3 驗證輸入的字串
當每一次鍵盤輸入時會觸發 keyup 事件,將每個輸入的字存入pressed陣列裡。
然後每輸入一個字符時,會擠掉原有的的字符,保證其最大長度始終為secretCode 的長度。(這樣做的目的是為了便於驗證密碼,只有完整無誤的輸入一次密碼時,才會觸發相應的效果)
window.addEventListener('keyup', (e) => {
pressed.push(e.key);//使用者輸入的值放入pressed陣列裡
pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length);
//截取陣列。使pressed陣列長度始終與設定密碼相同,且當超出時替換掉陣列第一個元素
if (pressed.join('').includes(secretCode)) { //判斷是否符合密碼
cornify_add(); //觸發效果
}
});