今天完成了一个项目,是要做一个广东电视局给的项目,实现一个用键盘或遥控控制的页面,重构工作我就不说了吧,来说说实现键盘控制的问题。
键盘控制想想好像很简单,但是其实这里面要注意的问题也有很多,我的思路是这样的:
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;
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;
}
}
效果图:
如有疑问,欢迎留言