实现数字电视机顶盒画面的纯键盘和遥控操作网页

今天完成了一个项目，是要做一个广东电视局给的项目，实现一个用键盘或遥控控制的页面，重构工作我就不说了吧，来说说实现键盘控制的问题。

键盘控制想想好像很简单，但是其实这里面要注意的问题也有很多，我的思路是这样的：

1、重构的时候定义一个active类，用来给当前选中的元素添加active样式（对了，由于项目需求，我在做的时候把类似a，input这样的自带焦点的元素都

换成了div和span来替代，因为机顶盒它自身会给这些元素带一个active样式，一个红框，但是太丑了，所以就自己定制化）

2、把重构的页面划分为若干个区域，在JS中为每个区域创建一个数组，这里我用btn*（*表示阿拉伯数字）来表示，这样，我们就得到了若干个数组，再用

index来表示每个数组中的元素下标，我们就可以很方便地访问每个元素

3、非常关键的一个地方,需要创建一个函数，来指导你当前的这个数组名是指哪个数组，所以就用到了一下这个代码：

var main=function(e){key=e.keyCode;keyControl(key);if(currBtns==1){dom=btn1[index];}else if(currBtns==2){dom=btn2[index];}else if(currBtns==3){dom=btn3[index];}else if(currBtns==4){dom=btn4[index];}else if(currBtns==5){dom=btn5[index];}else if(currBtns==5){dom=btn5[index];}else if(currBtns==6){dom=btn6[index];}else if(currBtns==7){dom=btn7[index];}else if(currBtns==8){dom=btn8[index];}else if(currBtns==9){dom=btn9[index];}$(predom).removeClass("active");$(predom).removeClass("btnActive");$(predom).removeClass("playing");predom=dom;if(dom==btn8[index]){$(dom).addClass("btnActive");}else if(dom==btn5[index]||dom==btn6[index]){$(dom).addClass("playing");}else{$(dom).addClass("active");}}

并且要让它在一开始的时候就绑定到键盘时间上：

document.body.onkeydown=main;

最后通过WASD和enter的键盘码来访问每个元素，这里因为是商业项目，所以不能透露太多，给出“UP”操作时的代码以供参考：

var keyControl=function(key){if(key==keyCode.up){if(currBtns==1){if(index>0)index--;}else if(currBtns==2){if(index>0)--index;else{currBtns=1;index=btn1.length-1;}}else if(currBtns==4){currBtns=3;index=0;}else if(currBtns==5){if(index>0)index--;}else if(currBtns==6){if(index>0)index--;else{currBtns=5;index=0;}}else if(currBtns==7){if(index>0)index--;}else if(currBtns==8){if(index==0){currBtns=2;index=0;}else if(index==1){currBtns=4;index=0;}else if(index==2){currBtns=6;index=0}else if(index==3){currBtns=7index=0;}}

效果图：

如有疑问，欢迎留言