Question

仅通过使用JS / HTML，我想检测空格键是否被击中，当它被击中时，我想将html更改为另一个文件。（注意，我只是在本地主机上工作，所以我想从本地主机：1337转到本地主机：1337 / mainmenu）

这就是我所拥有的，但是似乎存在一个潜在的问题。我有一个index.html文件和一个index.js文件。我的js文件中有一个脚本，允许文本淡入和淡出。该脚本运行良好。但是，当我为键盘事件添加脚本时，第一个脚本似乎停止工作。

有人可以指出这两个脚本是否相互干扰？另外，有人可以解释为什么我的键盘脚本无法运行吗？

JS：

var speed = 1000; 
var t = setInterval(function(){
  var slideSource = document.getElementById('play');
  slideSource.classList.toggle('fade');
}, speed);

//SEPERATE SCRIPTS
window.addEventListener("keydown", pressToPlay, false);
function checkSpacebar(e) {
    if(e.keyCode == "32") {
        window.location.href = "localhost:1337/mainmenu";
    }
}

HTML：

<html>
<body>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
    <div class="container">
    <img src="images/image.jpg" alt="Loading Image.." style="width:100%;height:100%;">
    <div class="title">
    <img src = "images/redfox.png" style = "width:7%">
    Oregon Trail:Marist Edition 
    <div class = "marist"><img src = "images/marist.png" style = "width:15%"></div>
    <img src = "images/redfox.png" style = "width:7%"></div>
    <div id ="play">Press Spacebar To Play!</div>
    </div>
    <link rel="stylesheet" type="text/css" href="/css/index.css">
    <script src="/JS/index.js" type="text/javascript"></script>
    </body>
    </html>

Answer 1

//SEPERATE SCRIPTS
    window.addEventListener("keydown", checkSpaceBar, false);
    function checkSpaceBar(e) {
        if(e.keyCode == "32") {
            window.location.href = "localhost:1337/mainmenu";
        }
    }

缩小了ES6样式

window.addEventListener("keydown",(e) => {if(e.keyCode === 32) window.location.href="localhost:1337/mainmenu";}, false);

Answer 2

您的JavaScript代码中有一些错误，您正在将一个未定义的变量（实际上是一个回调函数）传递给keydown事件侦听器，并且您以"开始一个字符串并关闭了它与'一起使用时，会产生意外的令牌错误，因此您的代码将崩溃，因此您应同时使用"或'而不是两者。

以下是您的代码，并进行了必要的修改：

// your passing an undefined pressToPlay function instead of checkSpacebar
window.addEventListener("keydown", checkSpacebar, false);

function checkSpacebar(e) {
    // use "32" or '32' and as of the keyCode attribute is an integer then no need to use 32 as a string, I mean instead of "32" write just 32.
    if(e.keyCode == 32) {
        window.location.href = "localhost:1337/mainmenu";
    }
}

希望我进一步推动了你。

Answer 3

在URL之前添加Http。

    window.addEventListener("keydown", checkSpaceBar, false);
        function checkSpaceBar(e) {
            if(e.keyCode == "32") {
               window.open('http://localhost:1337/mainmenu',"_self");
            }
        }

通过javascript和keyevent从一个HTML页面移至下一个HTML页面

3 个答案: