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

浏览数：20 / 时间：2015年06月09日

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

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

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

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

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

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

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

 

[html] view plaincopy
 
  1. var main=function(e){  
  2.             key=e.keyCode;  
  3.             keyControl(key);  
  4.             if(currBtns==1){  
  5.                 dom=btn1[index];  
  6.             }else if(currBtns==2){  
  7.                 dom=btn2[index];  
  8.             }else if(currBtns==3){  
  9.                 dom=btn3[index];  
  10.             }else if(currBtns==4){  
  11.                 dom=btn4[index];  
  12.             }else if(currBtns==5){  
  13.                 dom=btn5[index];  
  14.             }else if(currBtns==5){  
  15.                 dom=btn5[index];  
  16.             }else if(currBtns==6){  
  17.                 dom=btn6[index];  
  18.             }else if(currBtns==7){  
  19.                 dom=btn7[index];  
  20.             }else if(currBtns==8){  
  21.                 dom=btn8[index];  
  22.             }else if(currBtns==9){  
  23.                 dom=btn9[index];  
  24.             }  
  25.   
  26.             $(predom).removeClass("active");  
  27.             $(predom).removeClass("btnActive");  
  28.             $(predom).removeClass("playing");  
  29.             predom=dom;  
  30.             if(dom==btn8[index]){  
  31.                 $(dom).addClass("btnActive");  
  32.             }  
  33.             else if(dom==btn5[index]||dom==btn6[index]){  
  34.                 $(dom).addClass("playing");  
  35.             }  
  36.             else  
  37.             {  
  38.                 $(dom).addClass("active");  
  39.             }  
  40.               
  41.         }  

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

 

 

[html] view plaincopy
 
  1. document.body.onkeydown=main;  

 

 

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

 

[html] view plaincopy
 
  1. var keyControl=function(key){  
  2.             if(key==keyCode.up){  
  3.                 if(currBtns==1){  
  4.                     if(index>0)  
  5.                         index--;  
  6.                 }  
  7.                 else if(currBtns==2){  
  8.                     if(index>0)  
  9.                         --index;  
  10.                     else{  
  11.                         currBtns=1;  
  12.                         index=btn1.length-1;  
  13.                     }  
  14.                 }  
  15.                 else if(currBtns==4){  
  16.                     currBtns=3;  
  17.                     index=0;  
  18.                 }  
  19.                 else if(currBtns==5){  
  20.                     if(index>0)  
  21.                         index--;  
  22.                 }  
  23.                 else if(currBtns==6){  
  24.                     if(index>0)  
  25.                         index--;  
  26.                     else{  
  27.                         currBtns=5;  
  28.                         index=0;  
  29.                     }  
  30.                 }  
  31.                 else if(currBtns==7){  
  32.                     if(index>0)  
  33.                         index--;  
  34.                 }  
  35.                 else if(currBtns==8){  
  36.                     if(index==0){  
  37.                         currBtns=2;  
  38.                         index=0;  
  39.                     }  
  40.                     else if(index==1){  
  41.                         currBtns=4;  
  42.                         index=0;  
  43.                     }  
  44.                     else if(index==2){  
  45.                         currBtns=6;  
  46.                         index=0  
  47.                     }  
  48.                     else if(index==3){  
  49.                         currBtns=7  
  50.                         index=0;  
  51.                     }  
  52.                 }  


效果图：

 

技术分享
如有疑问，欢迎留言

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class 代码 log src http html si 问题 it class 代码 log src http html si 问题 it

相关文章

随机文章

您可能还喜欢

您可能还喜欢