iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 12
0
Modern Web

一直想著要做,卻懶得做的JS30系列系列 第 12

JS30-Day12

第十二天,今天來做個通關密語,當使用者輸入到正確文字時候跳出提示吧!

Day12

Demo,在Demo頁面直接使用鍵盤輸入通關密碼,正確就會跑出特效,這次的通關密碼是wesbos,要連續輸入且沒有錯誤才算正確!

js:邏輯主要利用陣列來儲存使用者輸入的文字,來比對是否和預設的通關密碼相同,如果相同就可以執行我們要的特效,這邊的特效是使用原作者提供的一隻js檔案,另外為了避免使用這輸入很多文字造成陣列過長,這邊使用splice語法將陣列內文字控制在一定數量,並使用join語法將陣列文字組成字串,再去比對是否跟通關密碼相符。

 //宣告一個陣列儲存使用者輸入過的文字
    const pressed = [];
    //宣告一個通關密碼
    const secretCode = 'wesbos';
    //監聽鍵盤按下的動作
    window.addEventListener('keyup', (e) => {
      //將按下的按鍵丟到陣列中
      pressed.push(e.key);
      //使用者很可能會輸入很多文字,造成陣列過長,所以將這列篩選,從最後往前數
      pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length);
      //把陣列用join('')重新組成字串,看是否有包含通關密碼,如果有就做事情
      //這邊是使用原作者另外寫的一隻js跑出特效
      if (pressed.join('').includes(secretCode)) {
        console.log('DING DING!');
        cornify_add();
      }
    });

以上就是第12天內容!


上一篇
JS30-Day11
下一篇
JS30-Day13
系列文
一直想著要做,卻懶得做的JS30系列13
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言