我可以使用 event.keyCode 得到一個句子嗎？

Question

我正在嘗試為我的網站制作一個復活節彩蛋，並且我制作了 javascript 代碼。 但它對我不起作用。

我試圖通過鍵入 c 來觸發 event.keyCode 並且輸出正在工作。（工作）但是，當我嘗試整個單詞（css）時，它不起作用。

<!DOCTYPE html>
<html onkeydown="function(event)">
<head>
</head>
<body>
<script>    
function function(event){
    var x = event.keyCode;
    if (x == 67) {
      alert ("work");
      if (x == 83) {
        alert ("work 2");
        if (x == 83) {
          alert ("boooom");
        }
      } else {
        alert("not working");
      }
    }
  }
</script>
</body>
</html>

正如您從我的代碼中看到的那樣，我想讓“boooom”不再工作。 我認為我需要延遲，但我不知道如何將延遲放入腳本中。

Answer 1

您將需要跟蹤信件的歷史。

每次按下該鍵時，將其添加到一個數組中，然后檢查最后 n 個字母是否是您關心的字母。

 var letters = []; function cb(event){ // push the new letter into the array letters.push(event.keyCode); // if there are 3 or more letters, check the last three if (letters.length > 2) { if (letters[letters.length - 1] === 83 && letters[letters.length - 2] === 83 && letters[letters.length - 3] === 67) { alert("boooom"); } } } document.addEventListener('keydown', cb);

Answer 2

我會選擇這個：

var lastKeys = [],
    triggerWord = "css";

function easteregg(event){
    var k = event.key;
    lastKeys.push(k);
    lastKeys = lastKeys.splice(-triggerWord.length);
    console.log(lastKeys)
    if(lastKeys.join("") == triggerWord) {
      console.log("bingo!");
    }
  }

使用event.key而不是 keyCode 將為您提供實際字符，這使得這更容易處理，假設您不需要對光標鍵等其他東西做出反應。盡管這些會在 lastKeys 中創建諸如ArrowUp之類的條目數組 - 不太可能匹配觸發詞，但您可能希望為實際的“字符”或其他內容添加一些過濾。

lastKeys = lastKeys.splice(-triggerWord.length)將我們的數組限制為推送到它的最后 x 個項目（x = 3 觸發詞“css”）

然后我們只檢查這個數組的連接內容是否與觸發詞匹配。

也許您想添加 toLowerCase，以便以大寫形式輸入某些字母仍會導致匹配。

Answer 3

首先，你應該比命名功能，防止錯誤之外的其他功能的東西，第二你需要跟蹤在過去的按鍵，像這樣的：

<!DOCTYPE html>
<html onkeydown="keyPressed()">
<head>
</head>
<body>
    <script>
        var keys = '';  // Create list of keys

        function keyPressed(){
            keys += event.key;  // Add last pressed key to keys
            keys = keys.substr(-3);  // Set keys to the three newest keys
            if(keys === 'css'){  // If the last pressed keys are 'css'
                alert('boooom');  // Do easter egg
            }
        }
    </script>
</body>
</html>

編輯：將 onkeydown 屬性放在<body>標簽中可能更有意義，因為這是實際顯示的內容。 您還可以擴展它以允許多個復活節彩蛋：

<!DOCTYPE html>
<html>
<head>
</head>
<body onkeydown="keyPressed()">
    <script>
        var keys = '';  // Create list of keys

        function keyPressed(){
            keys += event.key;  // Add last pressed key to keys
            keys = keys.substr(-4);  // Set keys to the four newest keys (to free up memory)
            if(keys.substr(-4) === 'html'){  // If the last 4 pressed keys are 'html'
                alert('html');  // Do first easter egg
            }
            else if(keys.substr(-3) === 'css'){  // Else if the last 3 pressed keys are 'css'
                alert('css');  // Do second easter egg
            }
            else if(keys.substr(-2) === 'js'){  // Else if the last 2 pressed keys are 'js'
                alert('js');  // Do third easter egg
            }
        }
    </script>
</body>
</html>

如果您使用alert()，您將需要在輸入這些復活節彩蛋之一之前單擊該頁面。

我可以使用 event.keyCode 得到一個句子嗎？

問題描述

3 個解決方案

解決方案1
0 2019-01-24 15:26:57

解決方案2
0 2019-01-24 15:32:37

解決方案3
0 已采納 2019-01-24 15:53:09

我可以使用 event.keyCode 得到一個句子嗎？

問題描述

3 個解決方案

解決方案1 0 2019-01-24 15:26:57

解決方案2 0 2019-01-24 15:32:37

解決方案3 0 已采納 2019-01-24 15:53:09

解決方案1
0 2019-01-24 15:26:57

解決方案2
0 2019-01-24 15:32:37

解決方案3
0 已采納 2019-01-24 15:53:09