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

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

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

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.οnkeydοwn=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;
					}
				}

效果图：

如有疑问，欢迎留言