js判断组合按键，以方向键为例，当前实列为两个，三个只需自己添加

时间：2024-02-29 18:41:20
 1 document.addEventListener(\'keydown\', down)
 2         document.addEventListener(\'keyup\', up)
 3         var downKey = [];      // 存放当前键盘按下的键
 4         var timer = null;      // 周期定时器，用来周期输出按下的状态
 5         var type = \'\';         // 当前按下的类型
 6         /**
 7         * 判断数组是否包含元素的函数
 8         * @param {Array} arr - 要判断的数组
 9         * @param {Number} value - 要判断的值
10         */
11         function _Includes (arr, value) {
12             if(arr.indexOf(value) === -1){
13                 return false;
14             } else {
15                 return true;
16             }
17         }
18         /**
19         * 判断当前按下状态的函数
20         */
21         function cd () {
22             if (downKey.length === 2) {
23                 // 根据长度取出数组内所有代码进行判断
24                 switch(downKey[0].toString() + downKey[1].toString()) {
25                     // 按下的先后顺序不一定，所以有两种情况
26                      case \'3738\':
27                      case \'3837\':
28                          type = \'左上\'
29                         break;
30                      case \'3839\':
31                      case \'3938\':
32                          type = \'右上\'
33                         break;
34                     case \'3940\':
35                     case \'4039\':
36                          type = \'右下\'
37                         break;
38                     case \'3740\':
39                     case \'4037\':
40                          type = \'左下\'
41                         break;
42                      default:
43                          break;
44                  } 
45             } else if (downKey.length === 1) {
46                 // 只按下一个键
47                 switch(downKey[0].toString()) {
48                      case \'37\':
49                          type = \'左\'
50                         break;
51                      case \'38\':
52                          type = \'上\'
53                         break;
54                     case \'39\':
55                          type = \'右\'
56                         break;
57                     case \'40\':
58                          type = \'下\'
59                         break;
60                      default:
61                          break;
62                  }
63             }
64         }
65         /**
66         * 监听按下的函数
67         * @param {Event} e - 事件
68         */
69         function down (e) {
70             // 如果按下键的时候数组为空则开启周期计时器
71             if(downKey.length === 0){
72                 timer = setInterval(function(){
73                     console.log(type);
74                 },200)
75             }
76             // 当前没按下这个键，存入按键数组
77             if (!_Includes(downKey, e.keyCode)) {
78                 downKey.push(e.keyCode);
79             }
80             // 执行判断状态的函数
81             cd();
82         }
83         /**
84         * 监听松开的函数
85         * @param {Event} e - 事件
86         */
87         function up (e) {
88             // 松开按键的时候将其从按键数组里去掉
89             let index = downKey.indexOf(e.keyCode);
90             downKey.splice(index,1);
91             // 执行判断状态的函数
92             cd();
93             // 若当前无按下键则清除定时器
94             if(downKey.length === 0){
95                 clearInterval(timer)
96             }
97         }

 

相关文章