我可以使用 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