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个项目（对于触发词“ css”，x = 3）

然后我们只检查此数组的串联内容是否与触发字匹配。

也许您想添加到下字母大写，以便以大写字母键入某些字母仍会导致匹配。

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属性放在标记中可能更有意义，因为这是实际显示的内容。您还可以扩展它以允许多个复活节彩蛋：

<!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 个答案: