Question

我有一个循环倒数计时器，设置了背景图像。当我按下“空间”时计时器启动，这样才行。但是现在我想要设置背景图像（其中有3个），这样在按键事件（1,2,3）上，背景图像就会改变。我不想要onclick活动！我的问题是，4个功能中只有一个同时工作。有没有更简单的方法来实现这一点，或者我可能只是在这里错过了一些愚蠢的东西？

以下是代码：

 document.body.onkeyup = function(e){
     if(e.keyCode == 32){
         countdown.start();
     } 

 document.body.onkeyup = function(e){
     if(e.keyCode == 49){
         $('body').css("background-image", "url(/img/image1.jpg)");
     } 

 document.body.onkeyup = function(e){
     if(e.keyCode == 50){
         $('body').css("background-image", "url(/img/image2.jpg)");
     } 

 document.body.onkeyup = function(e){
     if(e.keyCode == 51){
         $('body').css("background-image", "url(/img/image3.jpg)");
     }

提前感谢所有帮助：）

Answer 1

问题是因为您要覆盖onkeyup处理程序。您可以将所有逻辑放在一个处理程序中。使用addEventListener附加处理程序也会更好，如下所示：

document.body.addEventListener('keyup', function(e){
  if (e.keyCode == 32){
    countdown.start();
  } else if(e.keyCode == 49) {
    $('body').css("background-image", "url(/img/image1.jpg)");
  } else if (e.keyCode == 50) {
    $('body').css("background-image", "url(/img/image2.jpg)");
  } else if (e.keyCode == 51) {
     $('body').css("background-image", "url(/img/image3.jpg)");
  } 
});

另请注意，在您使用jQuery时，您可以附加如下事件：

$(document).on('keyup', function(e){
  if (e.which == 32){
    countdown.start();
  } else if(e.which == 49) {
    $('body').css("background-image", "url(/img/image1.jpg)");
  } else if (e.which == 50) {
    $('body').css("background-image", "url(/img/image2.jpg)");
  } else if (e.which == 51) {
     $('body').css("background-image", "url(/img/image3.jpg)");
  } 
});

Answer 2

为了更好地尝试对象的帮助。为-Xmodule创建对象，然后将keycode and images与受尊重的对象匹配.Place与keycode

＆＃13;

background-image

＆＃13;

var image ={
"49":'"url(/img/image1.jpg)',
"50":'"url(/img/image2.jpg)',
"51":'"url(/img/image3.jpg)',
}

document.body.addEventListener('keyup', function(e){
    if (e.keyCode == 32) {
      countdown.start();
    }
     if(Object.keys(image).includes(e.keyCode.toString())){
     $('body').css("background-image", image[e.keyCode.toString()]);
    console.log(image[e.keyCode.toString()])
    }
    
})

＆＃13;

Answer 3

您还可以使用switch声明

$(document).on('keyup', function(e){
  switch (e.keyCode) {
    case 32:
        countdown.start();
        break;
    case 49:
         $('body').css("background-image", "url(/img/image1.jpg)");
        break;
    case 50:
          $('body').css("background-image", "url(/img/image2.jpg)");
        break;
    case 51:
         $('body').css("background-image", "url(/img/image3.jpg)");
        break;
  }
}

Answer 4

肯定不会死...

但我注意到的一些事情是你的括号不对齐。其次，你有点多余，但我猜这是为了解决它

document.body.onkeyup = function(e){
    if(e.keyCode == 32){
        countdown.start();
    } 
    if(e.keyCode == 49){
        $('body').css("background-image", "url(/img/image1.jpg)");
    } 
    if(e.keyCode == 50){
        $('body').css("background-image", "url(/img/image2.jpg)");
    } 
    if(e.keyCode == 51){
        $('body').css("background-image", "url(/img/image3.jpg)");
    } 
}

在关键事件

4 个答案: