javascript - 我正在尝试制作一个程序，当按下 "a"键时会闪烁图像

Question

<div class="planeta" id="planeta">
  <img src="planeta.jpg" style="width: 150px; height: 150px;">
  <div class="text-blocka">
    <h4>Kepler-186f</h4>
    <p>550 light years away</p>
  </div>
</div>

代码的第一部分有效，图像开始闪烁，但我希望它在释放按键时取消闪烁，而这部分对我不起作用。下面是我迄今为止编写的 JavaScript。提前致谢!

function checkKeydowna(akey) {
    if (akey.keyCode == "65") {
      var img = document.getElementById('planeta');

var interval = window.setInterval(function(){
    if(img.style.visibility == 'hidden'){
        img.style.visibility = 'visible';
    } else {
      img.style.visibility == 'hidden'
      }
}, 50);
    }
}

window.addEventListener("keyup", checkKeyupa, false);

function checkKeyupa(abkey) {
    if (abkey.keyCode == "65") {
    delete window.setInterval();
    }
  }

Answer 1

• 您忘记了 checkKeydowna 的 addEventListener。
• 删除window.setInterval();没有意义。这并没有清除间隔。您应该使用window.clearInterval(intervalInstance)清除间隔。因此，如果您想清除一个间隔，您应该在设置它时将其存储在全局变量中。这就是为什么我声明 var Interval = false; 这也意味着间隔没有设置。
• Keydown 事件会被多次触发，因此您应该检查是否设置了间隔，以避免重新初始化它。

var interval = false;
function checkKeydowna(akey) {
  if (akey.keyCode == "65") {
    var img = document.getElementById('planeta');

    if (!interval) {
      interval = window.setInterval(function() {
        if (img.style.visibility == 'hidden') {
          img.style.visibility = 'visible';
        } else {
          img.style.visibility = 'hidden'
        }
      }, 50);
    }
  }
}

document.body.addEventListener("keyup", checkKeyupa, false);
document.body.addEventListener("keydown", checkKeydowna, false);

function checkKeyupa(abkey) {
  if (abkey.keyCode == "65") {
    window.clearInterval(interval);
    interval = false;
    var img = document.getElementById('planeta');
    img.style.visibility = 'visible';
  }
}

<img style='visibility:visible' src="https://www.google.com.tr/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" id="planeta" />