在关键事件上更改多个背景图像
Change multiple background images on key event
我有一个设置了背景图片的圆形倒数计时器。当我按下 'space' 时,计时器启动,这样就可以了。但是现在我想设置背景图像(其中有 3 个),以便在按键事件 (1,2,3) 上,背景图像会发生变化。我不想要 onclick 事件!
我的问题 atm 是 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)");
}
提前感谢大家的帮助:)
问题是因为您覆盖了 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)");
}
});
你也可以使用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;
}
}
这里肯定没死...
但是我注意到有几件事是您的括号没有对齐。其次你有点多余,但我的猜测是修复它
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)");
}
}
为了更好的方法,请尝试对象的帮助。为 keycode and images
创建对象,然后将 keycode
与相关对象匹配。将 background-image
放置
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()])
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input>
我有一个设置了背景图片的圆形倒数计时器。当我按下 'space' 时,计时器启动,这样就可以了。但是现在我想设置背景图像(其中有 3 个),以便在按键事件 (1,2,3) 上,背景图像会发生变化。我不想要 onclick 事件! 我的问题 atm 是 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)");
}
提前感谢大家的帮助:)
问题是因为您覆盖了 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)");
}
});
你也可以使用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;
}
}
这里肯定没死...
但是我注意到有几件事是您的括号没有对齐。其次你有点多余,但我的猜测是修复它
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)");
}
}
为了更好的方法,请尝试对象的帮助。为 keycode and images
创建对象,然后将 keycode
与相关对象匹配。将 background-image
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()])
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input>