Day12 Key Detection

發表於 | 分類於 | 閱讀次數:
| 589

Demo

今天的主題是彩蛋~!
我們在頁面上只要鍵入特定文字，就會觸發我們指定的事件。
用到的觀念滿簡單的，算是個簡單的小主題。

首先，先自訂這個特定密碼以及一個陣列來儲存我們鍵入的文字。

變數

1
2
const mykey = []
const code = 'icguanyu'

事件

所有的動作當然都是觸發在keyup後

1
2
3
window.addEventListener('keyup',function(e){
  ...
}

儲存

我們的條件是當mykey(輸入的內容)完全符合code(自訂的密碼)時觸發指定的涵式
所以每次keyup後都會把當下鍵入的文字儲存起來，我們透過e.key取得文字並透過陣列來儲存。

1
2
let key = e.key
mykey.push(key)

不過，所儲存的文字總有長度限制，因為我們的密碼是固定長度
所以加入條件判斷，儲存的長度不大於密碼的長度，如果大於就要刪除舊的內容(第一筆資料)

1
2
3
4
5
6
7
let key = e.key
if(mykey.length<code.length){
  mykey.push(key)
}else{
  mykey.shift()
  mykey.push(key)//移除後再繼續push
}

這邊使用到的關鍵：

  • shift 詳細介紹

    shift() 方法會移除並回傳陣列的第一個元素。此方法會改變陣列的長度。

  • push 詳細介紹

    push() 方法會添加一個或多個元素至陣列的末端，並且回傳陣列的新長度。

處理資料

我們儲存的資料是一筆陣列，如下:

無法直接與密碼做比較判斷，所以要將陣列轉為純文字。

1
let toString = mykey.join('')

我們定義一個新的變數儲存轉換後的文字
這邊使用的join()方法：

  • join 詳細介紹

    join() 方法會將陣列（或一個類陣列（array-like）物件）中所有的元素連接、合併成一個字串，並回傳此字串。如果未傳入參數，陣列中的元素將預設用英文逗號（「,」）隔開。如果 是空字串，合併後，元素間不會有任何字元。

程式碼

最後進入判斷即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const mykey = []
const code = 'icguanyu'

window.addEventListener('keyup',function(e){
  let key = e.key
  if(mykey.length<code.length){
    mykey.push(key)
  }else{
    mykey.shift()
    mykey.push(key)
  }
  let toString = mykey.join('')
  if(toString===code) alert('輸入正確,彩蛋出現')
})

0%