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

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

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

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=7
                        index=0;
                    }
                }

效果图：

如有疑问，欢迎留言