Question

所以我终于得到了一段代码，但是我很难理解它为什么会起作用。我的CSS基本上有一个精灵变形框变形为圆形的精灵表。

animation-play-state : paused;是我的CSS中的一条规则，它使精灵不会开始动画，直到按下键，就像你在JavaScript代码中看到的那样。

我的问题是为什么if keycheck为false时if执行代码块。根据我对!运算符的工作原理的了解，代码只是假设在keycheck为＆＃34; NOT＆＃34;假？它的初始值是false，为什么它会运行？

该代码用于在按住某个键时停止重复执行该事件。

keycheck = false;

window.addEventListener("keydown", checkKey_DN, false);
window.addEventListener("keyup", checkKey_UP, false);

function checkKey_DN(e) {
    if(e.keyCode == "83" && !keycheck){
        keycheck = true;
        $("boxMorph").style.animationPlayState = "running";
        $("boxMorph").style.WebkitAnimationPlayState = "running";
        $("boxMorph").style.visibility = "visible";
        $("boxMorph").classList.remove ("boxes");
        $("boxMorph").offsetWidth = $("boxMorph").offsetWidth;
        $("boxMorph").classList.add ("boxes");      

      }
  }

function checkKey_UP(e){
    if(e.keyCode == "83"){
        keycheck = false;
        $("boxes").style.visibility = "hidden";
      }
  }

这段代码有助于重新制作css精灵的动画。

$("boxMorph").classList.remove ("boxes");
$("boxMorph").offsetWidth = $("boxMorph").offsetWidth;
$("boxMorph").classList.add ("boxes");

Answer 1

您误解了NOT - 它返回值的倒数：

if(false) { /* this block will not be executed */ }

if(!false) { /* this block will be executed */ }

这是因为!false评估为true，相当于：

if(true) { /* this block will be executed */ }

当keycheck的值为假时，检查if(!keycheck)将仅，例如keycheck = false。

Answer 2

!运算符是否定运算符，而不是!=运算符。

布尔值上的JavaScript NOT运算符

2 个答案: