Javascript CSS类是'；当我将它添加到JS fike中时，它不会运行_Javascript_Html_Css

Javascript CSS类是'；当我将它添加到JS fike中时，它不会运行

javascript html css

Javascript CSS类是'；当我将它添加到JS fike中时，它不会运行,javascript,html,css,Javascript,Html,Css,我对CSS和JS仍然很陌生，但我已经看了好几遍，检查了W2School，搜索了类似的问题，我仍然不知道我哪里出了问题 <! DOC TYPE HTML> <html> <head> <h1> fruit dodge</h1> <link rel="stylesheet" href="FDCSS.css"> </head> <body onkeypress=&

我对CSS和JS仍然很陌生，但我已经看了好几遍，检查了W2School，搜索了类似的问题，我仍然不知道我哪里出了问题

     <! DOC TYPE HTML>
<html>
<head>
<h1> fruit dodge</h1>
<link rel="stylesheet" href="FDCSS.css">
</head>
<body onkeypress="jump()">
<div id="game">
    
    <div id="player"></div>

我知道动画本身可以工作，因为我在尝试将其添加到类之前对其进行了测试

var player = getElementById("player");
var fruit = getElementById("fruit");

    function jump()
    {
        player.classList.add("animate");
        setTimeout(function()
        {
            player.classList.remove("animate");
        },500);
    }

跳转函数应该将animate类添加到播放器角色，然后删除它并等待动画的持续时间（500毫秒）。

代码中有几个错误。在CSS部分，您需要在前面添加一个

符号

此外，您不应该设置

top

值的动画，而应该更喜欢硬件加速属性，如

transform

。（参见下面的示例）

在JS部分中，没有全局的

getElementById（）

，您需要使用来选择元素

var player = document.getElementById("player");
var fruit = document.getElementById("fruit");

function jump() {
  player.classList.add("animate");

  setTimeout(function () {
    player.classList.remove("animate");
  }, 500);
}

它应该是

@keyframes

查看它的

文档.getElementById

，而不仅仅是

getElementById

。

.animate {
  animation: jump 500ms;
}

@keyframes jump {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-40px);
  }
}

var player = document.getElementById("player");
var fruit = document.getElementById("fruit");

function jump() {
  player.classList.add("animate");

  setTimeout(function () {
    player.classList.remove("animate");
  }, 500);
}