我们都知道因为js是单线程的，所以没有可以同时触发键盘两个事件的方法
今天我们就来做一个可以实现这个功能方法
先来看一下成品图效果
接下来我们来看下具体是怎么实现的
注释写在了代码里面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.demo{
width: 30px;
height:10px;
}
.demo1{
position: absolute;
left:500px;
top:500px;
background:red;
}
.demo2{
background:green;
position: absolute;
left:600px;
top:500px;
}
</style>
</head>
<body>
<div>
<div class="demo demo1"></div>
<div class="demo demo2"></div>
</div>
<script src="../jq/jquery-3.3.1/jquery-3.3.1.js"></script>
<script>
var a_left = false; //先声明4个变量等于false
var a_right = false;
var b_left = false;
var b_right = false;
$('body').keydown(function(e){ //绑定按下事件 ，按下按键时变量等于true
switch(e.keyCode){
case 37:
a_left = true;
console.log('左按下');
break;
case 39:
a_right = true;
console.log('右按下');
break;
case 65:
b_left = true;
console.log('A按下');
break;
case 68:
b_right = true;
console.log('D按下');
break;
}
});
$('body').keyup(function(e){ //绑定抬起事件，按键抬起时变量等于false
switch(e.keyCode){
case 37:
a_left = false;
console.log('左抬起');
break;
case 39:
a_right = false;
console.log('右抬起');
break;
case 65:
b_left = false;
console.log('A抬起');
break;
case 68:
b_right = false;
console.log('D抬起');
break;
}
}); //然后开启一个定时器，不停的判断4个全局变量现在的状态。
//比如A按键按下，变量即等于true，这时再按键左按键变量也是等于true的，所以并不会起到冲突
//可实现同时触发两个按键事件
setInterval(function(){
if(a_left){
$('.demo1').css('left','-=5');
}
if(a_right){
$('.demo1').css('left','+=5');
}
if(b_left){
$('.demo2').css('left','-=5');
}
if(b_right){
$('.demo2').css('left','+=5');
}
},5)
</script>
</body>
</html>
谢谢观看，如有不足请指教！ 谢谢观看，如有不足请指教！谢谢观看，如有不足请指教！
