单击键时显示 gif

Show gif while clicking in a key

本文关键字:gif 显示 单击      更新时间:2023-09-26

您好,我想在单击Ctrl键时显示gif,但是当我停止时,我想显示图像。

我的代码使 gif 在我单击 Ctrl 时出现,但如果我停止 gif 会保留。

法典:

document.addEventListener('keydown', function(event) {
if(event.keyCode == 17) {
document.getElementById("key").innerHTML = "<img src='"stick.gif'">";
shoot -= 1;
document.getElementById("shoot").innerHTML = shoot;
  }
}

试试这个。我做了一个键控事件,当键没有被按下时替换 GIF。您也可以使其专门对 Ctrl 键做出反应。我已经为元素添加了两个 ID 标签,因为您没有附加任何 HTML 元素。

正如上面的注释所提到的,您需要一个Keyup函数来处理未按下键时的事件。

<script>document.addEventListener('keydown', function(event) {
console.log("Event");
if(event.keyCode == 17) {
console.log("Key Pressed");
document.getElementById("key").innerHTML = "<img src='"stick.gif'">";
shoot -= 1;
document.getElementById("shoot").innerHTML = shoot;
  }
});
document.addEventListener('keyup', function(event) {
document.getElementById("key").innerHTML = "This key is up"
});
</script>
<p id="key">Hello</p>
<p id="shoot">Shot</p>