JS代码精简

<script>
document.onsystemevent = grabEvent;
document.onkeypress = grabEvent;
document.onirkeypress = grabEvent;//全局变量
var black = "#000000";
var red = "#ff0000";
var grey = "#CCCCCC"; 
//左列表索引
var rowIndex = 1;
//左列表前索引
var oldIndex = 0;
//右列表索引
var colIndex = 1;
//右列表前索引
var oldcolIndex = 0;
//方向
var fx = 0;
//存储索引的数组
var arr= [];<!--获取键盘对应的keycode-->
function grabEvent() {
var key_code = event.which || event.keyCode;
if ( key_code < 58 && key_code > 47 )
{
key_code = key_code - 48;
return 0;
}
else
{
switch(key_code) {
case 1://up
if (fx == 0) {
rowIndex = rowIndex - 1;
upDownMove(key_code);
}
if (fx == 1) {
colIndex = colIndex - 1;
upDownMove(key_code);
}
return 0;
break;
case 2://down
if (fx == 0) {
rowIndex = rowIndex + 1;
upDownMove(key_code);
}
if (fx == 1) {
colIndex = colIndex + 1;
upDownMove(key_code);
}
return 0;
break;
case 3://left
fx = 0;
leftRightMove(key_code);
return 0;
break;
case 4://right
fx = 1;
leftRightMove(key_code);
return 0;
break;
case 13://enter

return 0;
break;
case 513:
return 0;
break;
case 340://mngenu return 0;
break;
case 339://exit
return 0;
break;
}
}
return 1;
}<!--键盘按上下键对应的函数-->
function upDownMove(code){
//如果是按的上，就将以前的行数索引得到，并用oldIndex存储
if (code == 1) {
if (fx == 0) {
//如果焦点在左边
if (rowIndex < 1) {
//临界点判断
rowIndex = 7;
oldIndex = 1;
} 
else
    {
//普通移动方式
oldIndex = rowIndex + 1;
}
//将以前的层隐藏
divbn(oldIndex , "none");
//将移动到的DIV显示
divbn(rowIndex , "block");
//将字体颜色改动
tdColor(rowIndex , red);
tdColor(oldIndex , black);
}
//焦点在右边
if (fx == 1) {
//临界点判断
if (colIndex < 1) {
colIndex = 7;
oldcolIndex = 1;
} else {
//正常情况
oldcolIndex = colIndex + 1;
}
//更改焦点位置
tdColor(rowIndex + "" + colIndex , red);
tdColor(rowIndex + "" + oldcolIndex , black);
}
}
//如果按的是下，也存储，
if(code == 2){
//如果在左边
if(fx == 0){
//临界点判断
if(rowIndex > 7){
rowIndex = 1;
oldIndex = 7;
} else {
//正常情况
oldIndex = rowIndex - 1;
}
//将以前的层隐藏
divbn(oldIndex , "none");
//将移动到的DIV显示
divbn(rowIndex , "block");
//将字体颜色改动
tdColor(rowIndex , red);
tdColor(oldIndex , black);
}
//焦点在右边
if(fx == 1){
//临界点
if(colIndex > 7){
colIndex = 1;
oldcolIndex = 7;
} else {
//正常
oldcolIndex = colIndex - 1;
} 
//焦点颜色改变
tdColor(rowIndex + "" + colIndex , red);
tdColor(rowIndex + "" + oldcolIndex , black);
}
}
}<!--键盘按左右键对应的函数-->
function leftRightMove(code){
if(code == 4){ 
// 确定方向已到右边
fx = 1;
//改变以前的列的颜色
tdColor(rowIndex , grey);
tdColor(rowIndex + "" + colIndex , red);
//判断是否在此保存过焦点,如果是则读取焦点,不是则正常移动
if(arr[rowIndex].substr(0,1) != rowIndex){
colIndex = 1;
tdColor(rowIndex , grey);
tdColor(rowIndex + "" + colIndex , red);
} else {
tdColor(rowIndex + "" + colIndex , black);
colIndex = arr[rowIndex] - rowIndex * 10;
tdColor(arr[rowIndex] , red);
tdColor(rowIndex , grey);
}
}
if(code == 3){
//确定方向在左边
fx = 0;
//改变焦点颜色
tdColor(rowIndex , red);
tdColor(rowIndex + "" + colIndex , grey);

//按下左键，将当前所在索引位存储在数组中
arr[rowIndex] = rowIndex + "" + colIndex;
//初始化右列表的索引
colIndex = 1;
}
}<!--根据ID得元素，根据ID改字体颜色，根据ID改状态-->
function $(id){
return document.getElementById(id);
}
function divbn(id,status){
$("div" + id).style.display = status;
}
function tdColor(id,col){
$("td" + id).style.color = col;
}
</script>

解决方案 »

  1.   

    如何精简没看出来，倒看出一个小问题来：
    <!--根据ID得元素，根据ID改字体颜色，根据ID改状态-->
    js没有html式的注释。
      

  2.   

    将代码精简一下，
    或者说换一个逻辑方式，至于效果依旧还是这个效果。
    所有代码都贴上来吧，
    <body topmargin="0" leftmargin="0">
    <div style="position:absolute; left:100px; top:191px; width:243px; height:400px;">
        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="menu">
          <tr>
            <td height="57" align="center" style="color:#ff0000" id="td1">左列表1</td>
          </tr>
          <tr>
            <td height="57" align="center" id="td2">左列表2</td>
          </tr>
          <tr>
            <td height="57" align="center" id="td3">左列表3</td>
          </tr>
          <tr>
            <td height="57" align="center" id="td4">左列表4</td>
          </tr>
          <tr>
            <td height="57" align="center" id="td5">左列表5</td>
          </tr>
          <tr>
            <td height="57" align="center" id="td6">左列表6</td>
          </tr>
          <tr>
            <td height="57" align="center" id="td7">左列表7</td>
          </tr>
        </table>
    </div>
    <!--
    对应左列表1
    -->
    <div style="position:absolute; left:375px; top:191px; width:772px; height:378px;" id="div1">
        <table width="690" border="0" align="center" cellpadding="0" cellspacing="0" class="list" id="table1">
          <tr>
            <td height="55" align="center" style="color:#CCCCCC;" id="td11">右列表11</td>
          </tr>
          <tr>
            <td height="55" align="center" id="td12">右列表12</td>
          </tr>
          <tr>
            <td height="54" align="center" id="td13">右列表13</td>
          </tr>
          <tr>
            <td height="55" align="center" id="td14">右列表14</td>
          </tr>
          <tr>
            <td height="54" align="center" id="td15">右列表15</td>
          </tr>
          <tr>
            <td height="54" align="center" id="td16">右列表16</td>
          </tr>
          <tr>
            <td height="55" align="center" id="td17">右列表17</td>
          </tr>
        </table>
    </div>
    <!--
    对应左列表2
    -->
    <div style="position:absolute; left:375px; top:191px; width:772px; height:378px; display:none;" id="div2">
        <table width="690" border="0" align="center" cellpadding="0" cellspacing="0" class="list" id="table2">
          <tr>
            <td height="55" align="center" style="color:#CCCCCC;" id="td21">右列表21</td>
          </tr>
          <tr>
            <td height="55" align="center" id="td22">右列表22</td>
          </tr>
          <tr>
            <td height="54" align="center" id="td23">右列表23</td>
          </tr>
        </table>
    </div>
    <!--
    对应左列表3
    -->
    <div style="position:absolute; left:375px; top:191px; width:772px; height:378px; display:none;" id="div3">
        <table width="690" border="0" align="center" cellpadding="0" cellspacing="0" class="list" id="table3">
          <tr>
            <td height="55" align="center" style="color:#CCCCCC;" id="td31">右列表31</td>
          </tr>
          <tr>
            <td height="55" align="center" id="td32">右列表32</td>
          </tr>
          <tr>
            <td height="54" align="center" id="td33">右列表33</td>
          </tr>
          <tr>
            <td height="54" align="center" id="td34">右列表34</td>
          </tr>
          <tr>
            <td height="54" align="center" id="td35">右列表35</td>
          </tr>
        </table>
    </div>
    <!--
    对应左列表4
    -->
    <div style="position:absolute; left:375px; top:191px; width:772px; height:378px; display:none;" id="div4">
        <table width="690" border="0" align="center" cellpadding="0" cellspacing="0" class="list" id="table4">
          <tr>
            <td height="55" align="center" style="color:#CCCCCC;" id="td41">右列表41</td>
          </tr>
          <tr>
            <td height="55" align="center" id="td42">右列表42</td>
          </tr>
          <tr>
            <td height="54" align="center" id="td43">右列表43</td>
          </tr>
          <tr>
            <td height="54" align="center" id="td44">右列表44</td>
          </tr>
          <tr>
            <td height="54" align="center" id="td45">右列表45</td>
          </tr>
          <tr>
            <td height="54" align="center" id="td46">右列表46</td>
          </tr>
          <tr>
            <td height="54" align="center" id="td47">右列表47</td>
          </tr>
        </table>
    </div>
    <!--
    对应左列表5
    -->
    <div style="position:absolute; left:375px; top:191px; width:772px; height:378px; display:none;" id="div5">
        <table width="690" border="0" align="center" cellpadding="0" cellspacing="0" class="list" id="table5">
          <tr>
            <td height="55" align="center" style="color:#CCCCCC;" id="td51">右列表51</td>
          </tr>
          <tr>
            <td height="55" align="center" id="td52">右列表52</td>
          </tr>
          <tr>
            <td height="54" align="center" id="td53">右列表53</td>
          </tr>
          <tr>
            <td height="54" align="center" id="td54">右列表54</td>
          </tr>
          <tr>
            <td height="54" align="center" id="td55">右列表55</td>
          </tr>
          <tr>
            <td height="54" align="center" id="td56">右列表56</td>
          </tr>
          <tr>
            <td height="54" align="center" id="td57">右列表57</td>
          </tr>
        </table>
    </div>
    <!--
    对应左列表6
    -->
    <div style="position:absolute; left:375px; top:191px; width:772px; height:378px; display:none;" id="div6">
        <table width="690" border="0" align="center" cellpadding="0" cellspacing="0" class="list" id="table6">
          <tr>
            <td height="55" align="center" style="color:#CCCCCC;" id="td61">右列表61</td>
          </tr>
          <tr>
            <td height="55" align="center" id="td62">右列表62</td>
          </tr>
        </table>
    </div>
    <!--
    对应左列表7
    -->
    <div style="position:absolute; left:375px; top:191px; width:772px; height:378px; display:none;" id="div7">
        <table width="690" border="0" align="center" cellpadding="0" cellspacing="0" class="list" id="table7">
          <tr>
            <td height="55" align="center" style="color:#CCCCCC;" id="td71">右列表71</td>
          </tr>
          <tr>
            <td height="55" align="center" id="td72">右列表72</td>
          </tr>
          <tr>
            <td height="54" align="center" id="td73">右列表73</td>
          </tr>
          <tr>
            <td height="54" align="center" id="td74">右列表74</td>
          </tr>
        </table>
    </div>
    </body>
    </html>