首页 > 试题广场 >

移动控制

[编程题]移动控制
  • 热度指数:1836 时间限制:C/C++ 3秒,其他语言6秒 空间限制:C/C++ 256M,其他语言512M
  • 算法知识视频讲解
界面中存在id=jsContainer的节点A,系统会随机生成id为jsLayout的 m行 x n列 表格(m >= 1, n >= 1),并随机选中一个td节点,请按照如下需求实现bind函数
1、bind 函数为document绑定keydown事件,当系统触发上(键值38)下(键值40)左(键值37)右(键值39)按键时,请找到当前选中的td节点,并根据当前指令切换高亮节点,具体效果参考以下图片
2、在第一列往左移动则到达最后一列;在最后一列往右移动则到达第一列;在第一行往上移动则到达最后一行;在最后一行往下移动则到达第一行;
3、请不要手动调用bind函数
4、当前界面为系统在节点A中生成 9 * 9 表格并随机选中一个td节点后的效果
5、请不要手动修改html和css,请不要修改js中的事件绑定方式
6、不要使用第三方插件
function bind() {
    document.onkeydown = event => {
        if (!event) return;
        var code = event.keyCode || '';
        if (!{ '37': 1, '38': 1, '39': 1, '40': 1 }[code]) {
            return;
        } else {
            let tdList = document.getElementsByTagName("td");
            let target = undefined;
            for (let i = 0, len = tdList.length; i < len; i++) {
                if (tdList[i].classList.contains("current")) {
                    target = tdList[i];
                    tdList[i].classList.remove("current");
                    break;
                }
            }
            let parent = target.parentNode;
            let len = parent.children.length;
            let findIndex = (target, parent) => {
                for (let i = 0; i < len; i++) {
                    if (parent.children[i] === target) {
                        return i;
                    }
                }
            }
            let targetIndex = findIndex(target, parent);
            if (code === 37) {
                parent.children[targetIndex > 0 ? targetIndex - 1 : len - 1].classList.add("current");
            }
            if (code === 38) {
                let targetRow = findIndex(parent, parent.parentNode);
                parent.parentNode.children[targetRow > 0 ? targetRow - 1 : parent.parentNode.children.length - 1].children[targetIndex].classList.add("current");
            }
            if (code === 39) {
                parent.children[targetIndex < len - 1 ? targetIndex + 1 : 0].classList.add("current");
            }
            if (code === 40) {
                let targetRow = findIndex(parent, parent.parentNode);
                parent.parentNode.children[targetRow < parent.parentNode.children.length - 1 ? targetRow + 1 : 0].children[targetIndex].classList.add("current");
            }
        };
        event.preventDefault && event.preventDefault();
    };
}

编辑于 2021-06-22 16:18:41 回复(0)
刷到后边这几题全程复制粘贴😫太难了
发表于 2022-07-14 23:50:53 回复(0)
这又是为啥跑不过呢 要求都实现了
function bind() {

    document.onkeydown = event => {
        if (!event) return;
        var code = event.keyCode || '';
        if (!{'37': 1, '38': 1, '39': 1, '40': 1}[code]) return;
        event.preventDefault && event.preventDefault();
        //TODO: 请实现按键控制
        const currentDom = document.querySelector("#jsContainer > .game .current")
        const tableDom = document.querySelector("#jsContainer > .game")
        const rowDoms = tableDom.rows
        const rowLen = rowDoms.length
        const colLen = rowDoms[0].children.length
        const currentRow = [...rowDoms].indexOf(currentDom.parentNode)
        const currentCol = [...rowDoms[currentRow].children].indexOf(currentDom)
        let newCurrentRow = currentRow
        let newCurrentCol = currentCol
        if (code === 37) {
            if (currentCol === 0) newCurrentCol = colLen - 1
            else newCurrentCol -= 1
        } else if (code === 38) {
            if (currentRow === 0) newCurrentRow = rowLen - 1
            else newCurrentRow -= 1
        } else if (code === 39) {
            if (currentCol === colLen - 1) newCurrentCol = 0
            else newCurrentCol += 1
        } else if (code === 40) {
            if (currentRow === rowLen - 1) newCurrentRow = 0
            else newCurrentRow += 1
        }
        if (newCurrentRow !== currentRow || newCurrentCol !== currentCol) {
            currentDom.classList.remove('current')
            rowDoms[newCurrentRow].children[newCurrentCol].classList.add('current')
        }
    };
}


发表于 2021-11-30 15:11:52 回复(1)
function bind() {
        document.onkeydown = (event) => {
          if (!event) return;
          var code = event.keyCode || "";
          if (!{ 37: 1, 38: 1, 39: 1, 40: 1 }[code]) return;
          event.preventDefault && event.preventDefault();
          //TODO: 请实现按键控制
          const tbody = document.getElementsByTagName("tbody")[0];
          let position = {
            top: 0,
            left: 0,
          };
          Array.from(tbody.children).forEach((item, index) => {
            Array.from(item.children).forEach((j, inx) => {
              if (j.className == "current")
                position = { top: index, left: inx };
            });
          });
          Array.from(tbody.children).forEach((item, index) => {
            Array.from(item.children).forEach((j, inx) => {
              j.className = "";
            });
          });
          switch (code) {
            // 左
            case 37:
              position.left > 0
                ? (position.left -= 1)
                : (position.left = 8);
               
              break;
            // 右
            case 39:
            position.left <8
                ? (position.left += 1)
                : position.left=0;
              break;
            // 上
            case 38:
            position.top > 0
                ? (position.top -= 1)
                : (position.top = 8);
              break;
            // 下
            case 40:
            position.top <8
                ? (position.top += 1)
                : position.top=0;
              break;
          };
          Array.from(tbody.children).forEach((item, index) => {
                Array.from(item.children).forEach((j, inx) => {
                  if (inx == position.left && index == position.top) {
                    j.className = "current";
                  }
                });
              });
        };
      }
     
发表于 2023-12-28 17:57:17 回复(1)
    function bind() {
        document.onkeydown = event => {
            if (!event) return;
            var code = event.keyCode || '';
            if (!{'37': 1, '38': 1, '39': 1, '40': 1}[code]) return;
            event.preventDefault && event.preventDefault();
            //TODO: 请实现按键控制
            let current = document.querySelector('.current')
            let index = Array.from(current.parentElement.children).indexOf(current)
            current.classList.remove('current')

            if (code === 37) current.previousElementSibling ? current.previousElementSibling.classList.add('current') : current.parentElement.lastElementChild.classList.add('current')
            if (code === 38) current.parentElement.previousElementSibling ? current.parentElement.previousElementSibling.children.item(index).classList.add('current') : current.parentElement.parentElement.lastElementChild.children.item(index).classList.add('current')// 向上移动
            if (code === 39) current.nextElementSibling ? current.nextElementSibling.classList.add('current') : current.parentElement.firstElementChild.classList.add('current')
            if (code === 40) current.parentElement.nextElementSibling ? current.parentElement.nextElementSibling.children.item(index).classList.add('current') : current.parentElement.parentElement.firstElementChild.children.item(index).classList.add('current')// 向上移动
        };
    }
发表于 2023-09-24 18:20:16 回复(0)
function bind() {
            document.onkeydown = event => {
                if (!event) return;
                var code = event.keyCode || '';
                if (!{ '37': 1, '38': 1, '39': 1, '40': 1 }[code]) {
                    return;
                }
                else 
                {
                    let tdList = document.getElementsByTagName("td");
                    // target是选中的格子
                    let target = undefined;
                    for (let i = 0, len = tdList.length; i < len; i++) {
                        // element.classList.contains('类名')判断某个元素中是否存在某个类名, 返回布尔值.
                        // 如果tdList[i]有当前current的类名, 就证明某个格子是选中的状态
                        if (tdList[i].classList.contains('current')) {
                            // 把这个格子给赋给target
                            target = tdList[i];
                            // 去除这个格子的current属性
                            tdList[i].classList.remove("current");
                            break;
                        }
                    }
                    // 选中的格子 的父节点
                    // 是tr
                    let parent = target.parentNode;
                    // 一共有多少行格子
                    let len = parent.children.length;
                    // 得到选中格子的索引 的函数
                    let findIndex = (target, parent) => {
                        for (let i = 0; i < len; i++) {
                            if (parent.children[i] === target) {
                                return i;
                            }
                        }
                    }
                    // 运行这个函数, 得到选中的格子的索引
                    let targetIndex = findIndex(target, parent);

                    // 左移
                    if (code === 37) {
                        // 选中格子的索引值如果>0,就减1(即左移) , 给这个索引的格子添加current
                        // 如果索引=0,证明已经在最左边了, 再左移, 跳到最右边 , 即len-1,给最右的添加current
                        parent.children[targetIndex > 0 ? targetIndex - 1 : len - 1].classList.add("current");
                    }
                    // 上移
                    if (code === 38) {
                        // 因为这个是上移, 需要得出列的索引,而不是行的索引
                        // parent是一个tr, tr的父节点是tbody, 在tbody里面的某个tr, 算列的索引值.
                        let targetRow = findIndex(parent, parent.parentNode);
                        parent.parentNode.children[targetRow > 0 ? targetRow - 1 : parent.parentNode.children.length - 1].children[targetIndex].classList.add("current");
                    }
                    // 右移
                    if (code === 39) {
                        parent.children[targetIndex < len - 1 ? targetIndex + 1 : 0].classList.add("current");
                    }
                    // 下移
                    if (code === 40) {
                        let targetRow = findIndex(parent, parent.parentNode);
                        parent.parentNode.children[targetRow < parent.parentNode.children.length - 1 ? targetRow + 1 : 0].children[targetIndex].classList.add("current");
                    }
                }
                event.preventDefault && event.preventDefault();
            };
        }

发表于 2023-04-06 11:22:14 回复(0)
      //TODO: 请实现按键控制
        let current_el = document.querySelector('.current');
        let tbody_trs = document.querySelectorAll('tbody > tr')
        // console.log(tbody_trs.length,tbody_trs[0].children.length)
        let tbody_tds = tbody_trs[0].children.length;
        let current_hang = 0;
        let current_lie = 0;
        let total_hang = tbody_trs.length;
        let total_lie = tbody_tds;
        tbody_trs.forEach((t, i) => {
          [].slice.call(t.children).findIndex((m, n) => {
            if (m === current_el) {
              current_lie = n;
              current_hang = i
            };
          })
        })
        console.log(current_hang,current_lie,  '当前行列')
        current_el.classList.remove('current');
        if (code == '37') {
          current_lie--;
          if (current_lie < 0) {
            current_lie = total_lie - 1
          }
        } else if (code == '38') {
          current_hang--;
          if (current_hang < 0) {
            current_hang = total_hang - 1;
            console.log(current_hang)
          }
        } else if (code == '39') {
          current_lie++;
          console.log( current_lie, total_lie, '@@@@@@@####')
          if (current_lie > total_lie - 1) {
            current_lie = 0
            console.log(current_lie, '查看列')
          }
        } else {
          current_hang++;
          if (current_hang > total_hang -1) {
            current_hang = 0
          }
        }
        tbody_trs[current_hang].children[current_lie].classList.add('current')

发表于 2022-12-07 21:28:40 回复(0)
逻辑是对的,只是改变了选择的class类名,并没有操纵节点;
function bind() {

    document.onkeydown = event => {
        if (!event) return;
        var code = event.keyCode || '';
        if (!{'37': 1, '38': 1, '39': 1, '40': 1}[code]) return;
        event.preventDefault && event.preventDefault();
        //TODO: 请实现按键控制
         let active = document.getElementsByClassName('current')[0]
    let td = document.getElementsByTagName('td')
    let num = 0
    Array.from(td).forEach((item,index)=>{
        if(item.className == 'current'){
            num = index
        }
    })
        let m = 9,n=9
    // console.log(num);
    active.className = ''
     if(code == '37'){
        let arr = []
        for(let i=0;i<m*n;i++){
            if(i%n == 0){
                arr.push(i)
            }
        }
        if(arr.indexOf(num) !== -1){
            num = num + n - 1
        }else{
            num -= 1
        }
    }else if(code == '38'){
        let arr = []
        for(let i=0;i<n;i++){
            arr.push(i)
        }
        if(arr.indexOf(num) !== -1){
            num += (m-1) * n
        }else{
            num -= n
        }
    }else if(code == '39'){
        let arr = []
        for(let i=0;i<n*m;i++){
            if(i%n == n-1){
                arr.push(i)
            }
        }
        if(arr.indexOf(num) !== -1){
            num -= n-1
        }else{
            num += 1
        }
    }else if(code == '40'){
        let arr = []
        for(let i=(m-1)*n;i<m*n;i++){
            arr.push(i)
        }
        if(arr.indexOf(num) !== -1){
            num -= (m-1)*n
        }else{
            num += n
        }
    }
    td[num].className = 'current'
    };
}

发表于 2022-12-02 10:26:01 回复(0)
//本地跑能过 牛客上不行 实现是没问题的
function bind() {
            let div = document.getElementById('jsContainer')
            let tr = Array.from(document.querySelectorAll('tr'))
            let td = Array.from(document.querySelectorAll('td'))
            let current = document.getElementsByClassName('current')[0]

            document.onkeydown = event => {
                if (!event) return;
                var code = event.keyCode || '';
                if (!{ '37': 1, '38': 1, '39': 1, '40': 1 }[code]) return;
                event.preventDefault && event.preventDefault();
                //TODO: 请实现按键控制
                //上
                let x = 0;
                let y = 0;

                tr.forEach((item,index)=>{
                    if(item === current.parentNode){
                        y = index
                        Array.from(item.querySelectorAll('td')).forEach((item,index)=>{
                            if(item === current){
                                x = index
                            }
                        })
                    }
                })

                //上
                if(Number(code) === 38){
                    if(y === 0) y=tr.length-1
                    else y--
                }
                //下
                if(Number(code) === 40){
                    if(y === tr.length-1) y=0
                    else y++
                }
                //左
                if(Number(code) === 37){
                    if(x === 0) x=tr[y].children.length-1
                    else x--
                }
                //右
                if(Number(code) === 39){
                    if(x === tr[y].children.length-1) x=0
                    else x++
                }
                current.classList.remove('current')
                current = tr[y].children[x]
                current.classList.add('current')
            };
        }
发表于 2022-11-24 23:02:53 回复(0)
function bind() {
        document.onkeydown = event => {
            if (!event) return;
            var code = event.keyCode || "";
            if (!{ 37: 1, 38: 1, 39: 1, 40: 1 }[code]) return;
            event.preventDefault && event.preventDefault();
            //TODO: 请实现按键控制
            var gameTR = document.querySelectorAll(".game tr");
            var current = document.querySelector(".current");
            var rowIndex = 0, colIndex = 0;
            console.log(document.querySelectorAll('.game td'))
            for(let key in gameTR){
                if(gameTR[key].contains && gameTR[key].contains(current)){
                    rowIndex = Number(key) + 1
                    break
                }
            }
            var gameTD = document.querySelectorAll('.game tr:nth-of-type(' + rowIndex + ') td');
            for(let key in gameTD){
                if(gameTD[key] == current){
                    colIndex = Number(key) + 1
                    break
                }
            }
            current.className = "";
            if (code == 37) {
            // 左移
            if (colIndex == 1) colIndex = gameTD.length;
            else colIndex -= 1;
            } else if (code == 38) {
            // 上移
            if (rowIndex == 1) rowIndex = gameTR.length;
            else rowIndex -= 1;
            } else if (code == 39) {
            // 右移
            if (colIndex == gameTD.length) colIndex = 1;
            else colIndex += 1;
            } else if (code == 40) {
            // 下移
            if (rowIndex == gameTR.length) rowIndex = 1;
            else rowIndex += 1;
            }
            document.querySelector('.game tr:nth-of-type('+rowIndex +') td:nth-of-type(' + colIndex+ ')').className = "current";
        };
    }

发表于 2022-10-13 15:11:26 回复(0)
// 哪里出错了哎,又是实现了过不了
      function bind() {
        document.onkeydown = (event) => {
          if (!event) return;
          var code = event.keyCode || "";
          if (!{ 37: 1, 38: 1, 39: 1, 40: 1 }[code]) return;
          event.preventDefault && event.preventDefault();
          //TODO: 请实现按键控制
          const current = document.querySelector(".current");
          if (code === 38) {
            // 上
            // 获取当前元素在父类中的位置
            let index = Array.from(
              current.parentElement.querySelectorAll("td")
            ).indexOf(current);
            if (current.parentElement.previousElementSibling) {
              // 上边还存在元素时
              current.parentElement.previousElementSibling
                .querySelectorAll("td")
                [index].setAttribute("class", "current");
            } else {
              // 上边不存在元素,直接跳到最后一个元素
              current.parentElement.parentElement.lastElementChild
                .querySelectorAll("td")
                [index].setAttribute("class", "current");
            }
          } else if (code === 40) {
            // 下和向上同理
            // 获取当前元素在父类中的位置
            let index = Array.from(
              current.parentElement.querySelectorAll("td")
            ).indexOf(current);
            if (current.parentElement.nextElementSibling) {
              // 下边还存在元素时
              current.parentElement.nextElementSibling
                .querySelectorAll("td")
                [index].setAttribute("class", "current");
            } else {
              // 下边不存在元素,直接跳到最后一个元素
              current.parentElement.parentElement.firstElementChild
                .querySelectorAll("td")
                [index].setAttribute("class", "current");
            }
          } else if (code === 37) {
            // 左平移
            if (current.previousElementSibling) {
              // 左边存在元素
              current.previousElementSibling.setAttribute("class", "current");
            } else {
              // 左边不存在元素时
              current.parentElement.lastElementChild.setAttribute(
                "class",
                "current"
              );
            }
          } else {
            // 右平移同理
            if (current.nextElementSibling) {
              // 左边存在元素
              current.nextElementSibling.setAttribute("class", "current");
            } else {
              // 左边不存在元素时
              current.parentElement.firstElementChild.setAttribute(
                "class",
                "current"
              );
            }
          }
          //  清除原来的class
          current.removeAttribute("class");
        };
      }
      bind();

发表于 2022-08-18 10:24:37 回复(0)
function bind() {
    document.onkeydown = event => {
      if (!event) return
      var code = event.keyCode || ''
      if (!{ 37: 1, 38: 1, 39: 1, 40: 1 }[code]) return
      event.preventDefault && event.preventDefault()

      var table = document.querySelector('.game')
      var rowNum = document.querySelector('.game').querySelectorAll('tr')[0]
        .children.length

      var tdList = table.querySelectorAll('td')
      var current = document.querySelector('.current')
      var currentIndex = Array.prototype.indexOf.call(tdList, current)

      var nextIndex =
        currentIndex +
        (code == '37' ? -1 : code == '39' ? 1 : code == '38' ? -rowNum : rowNum)
      if (nextIndex >= tdList.length) {
        nextIndex = nextIndex % tdList.length
      }

      if (code == '37' || code == '39') {
        if (
          (nextIndex / rowNum) << 0 != (currentIndex / rowNum) << 0 ||
          nextIndex < 0
        ) {
          nextIndex =
            code == '37'
              ? (((currentIndex / rowNum) << 0) + 1) * rowNum - 1
              : code == '39'
              ? ((currentIndex / rowNum) << 0) * rowNum
              : code
        }
      }

      Array.prototype.slice.call(tdList, currentIndex)[0].className = ''

      Array.prototype.slice.call(tdList, nextIndex)[0].className = 'current'
    }
  }

发表于 2022-08-02 12:12:28 回复(0)
function bind() {

    document.onkeydown = event => {
        if (!event) return;
        var code = event.keyCode || '';
        if (!{'37': 1, '38': 1, '39': 1, '40': 1}[code]) return;
        event.preventDefault && event.preventDefault();
        //TODO: 请实现按键控制
        var currentTd = document.getElementsByClassName('current')[0];
        currentTd.classList.remove('current');
        var tds = document.getElementsByTagName('td');
        var cols = parseInt(Math.sqrt(tds.length));
        var index;

        for(var i = 0; i < tds.length; i++) {
            if(tds[i] === currentTd) {
                index = i;
                console.log('index: ' + index)
            }
        }

        if(code == '37') { //left
            index % cols == 0? index = index + cols - 1 : index--;
        } else if(code == '39') { // right
            index % cols == cols - 1 ? index = index - cols + 1 : index++;
        } else if(code == '38') { //up
            index - cols < 0 ? index = tds.length - cols + index : index = index - cols;
        } else if (code == '40') { // down
            index + cols >  tds.length - 1 ? index = index % cols : index = index + cols;
        }

        tds[index].classList.add('current');
    };
}

发表于 2022-03-01 17:56:44 回复(0)
function bind() {

    document.onkeydown = event => {
        if (!event) return;
        var code = event.keyCode || '';
        if (!{'37': 1, '38': 1, '39': 1, '40': 1}[code]) return;
        else {
            var tdList = document.querySelectorAll('td'); // 单元格集合
            var target = null; // 当前高亮元素
            for(var i=0;i<tdList.length;i++){ // 找新高亮元素前新将所有高亮元素清除掉,同时记录当前高亮元素
                if(tdList[i].classList.contains('current')){
                    target = tdList[i];
                    tdList[i].classList.remove('current');
                    break;
                }
            }
            var father = target.parentNode; // 当前高亮元素所在行
            var len = father.querySelectorAll('td').length; // 当前高亮元素所在行单元格数量
            var trList = document.querySelectorAll('tr'); // 行集合
            var findIndex = (target, parent) => { // 找出子元素在父元素孩子中的下标
                for (let i = 0; i < len; i++) {
                    if (parent.children[i] === target) {
                        return i;
                    }
                }
            }
            var colorFn = (row,col) => { // 给(row,col)位置的单元格上***r />               trList[row].children[col].classList.add('current');  
            };
            var rowIndex = findIndex(father,father.parentNode); // 计算当前高亮元素行坐标
            var colIndex = findIndex(target,father); // 计算当前高亮元素列坐标
            switch(code){
                case 37: colIndex>0 ? colorFn(rowIndex,colIndex-1) : colorFn(rowIndex,len-1); break;// 向左,只要不在第一格就将左边元素高亮,否则高亮最后一个元素,以下同理
                case 38: rowIndex>0 ? colorFn(rowIndex-1,colIndex) : colorFn(trList.length-1,colIndex); break;// 向上
                case 39: colIndex<len-1 ? colorFn(rowIndex,colIndex+1) : colorFn(rowIndex,0); break;// 向右
                case 40: rowIndex>trList.length-1 ? colorFn(rowIndex+1,colIndex) : colorFn(0,colIndex); break;// 向下
            }
        }
        event.preventDefault && event.preventDefault();
        //TODO: 请实现按键控制
    };
}
发表于 2022-02-23 19:48:46 回复(0)
function bind() {

    document.onkeydown = event => {
        if (!event) return;
        var code = event.keyCode || '';
        if (!{'37': 1, '38': 1, '39': 1, '40': 1}[code]) return;
        event.preventDefault && event.preventDefault();
        
        //TODO: 请实现按键控制
        var acTd = document.querySelector('.current');
        acTd.classList.remove('current');
        var acTdTr = acTd.parentElement;
        var table = acTdTr.parentElement;
        //给表格所有元素添加行列自定义属性
        Array.from(acTdTr.parentElement.children).forEach((tr,itr)=>{
            Array.from(tr.children).forEach((td,itd)=>{
                td.setAttribute('row',itr); //行
                td.setAttribute('col',itd); //列
            })
        })
        // 获取选中元素的行列
        var obj = {
            col: acTd.getAttribute('col'),
            row: acTd.getAttribute('row'),
            colTotal: acTdTr.children.length-1,
            rowTotal: table.children.length-1
        };
        switch(code){
            case 37://左
                if(obj.col==0){
                   acTd = table.querySelector(`td[col='${obj.colTotal}'][row='${obj.row}']`);
                }else{
                   acTd = table.querySelector(`td[col='${obj.col-1}'][row='${obj.row}']`);
                }
                break;
            case 38://上
                console.log(`td[col='${obj.col}'][row='${obj.row-1}']`);
                if(obj.row==0){
                   acTd = table.querySelector(`td[col='${obj.col}'][row='${obj.rowTotal}']`);
                }else{
                   acTd = table.querySelector(`td[col='${obj.col}'][row='${obj.row-1}']`);
                }
                break;
            case 39://右
                if(obj.col==obj.colTotal){
                   acTd = table.querySelector(`td[col='${'0'}'][row='${obj.row}']`);
                }else{
                   acTd = table.querySelector(`td[col='${obj.col+1}'][row='${obj.row}']`);
                }
                break;
            case 40://下
                if(obj.row==obj.rowTotal){
                   acTd = table.querySelector(`td[col='${obj.col}'][row='${'0'}']`);
                }else{
                   acTd = table.querySelector(`td[col='${obj.col}'][row='${obj.row+1}']`);
                }
                break;
            default:
                break;
        }
        console.log(acTd);
        acTd.className='current';
    };
}

发表于 2022-02-18 16:05:59 回复(1)
var initMove = function () {
  var trs = Array.from(document.querySelectorAll("tr"));
  var tds = trs.map((tr) => Array.from(tr.querySelectorAll("td")));
  var m = trs.length;
  var n = tds[0].length;
  function change(current, changeIndex) {
    var tr = current.parentNode;
    var i = trs.indexOf(tr);
    var j = tds[i].indexOf(current);
    var [_i, _j] = changeIndex(i, j);
    current.classList.remove("current");
    tds[_i][_j].classList.add("current");
  }
  var obj = {
    up(current) {
      change(current, function (i, j) {
        return [i > 0 ? i - 1 : m - 1, j];
      });
    },
    down(current) {
      change(current, function (i, j) {
        return [i < m - 1 ? i + 1 : 0, j];
      });
    },
    left(current) {
      change(current, function (i, j) {
        return [i, j > 0 ? j - 1 : n - 1];
      });
    },
    right(current) {
      change(current, function (i, j) {
        return [i, j < n - 1 ? j + 1 : 0];
      });
    }
  };
  obj[37] = obj.left;
  obj[38] = obj.up;
  obj[39] = obj.right;
  obj[40] = obj.down;
  return obj;
};

function bind() {
  document.onkeydown = (event) => {
    if (!event) return;
    var code = event.keyCode || "";
    if (!{ 37: 1, 38: 1, 39: 1, 40: 1 }[code]) return;
    event.preventDefault && event.preventDefault();
    //TODO: 请实现按键控制
    var current = document.querySelector(".current");
    var move = initMove();
    move[code](current);
  };
}

发表于 2022-01-12 14:49:43 回复(0)
function bind() {
  document.onkeydown = (event) => {
    if (!event) return;
    var code = event.keyCode || '';
    if (!{ 37: 1, 38: 1, 39: 1, 40: 1 }[code]) return;
    event.preventDefault && event.preventDefault();
    //TODO: 请实现按键控制
    // 获取 dom 元素 (写在外面应该更好,不过这里不会通过测试)
    var container = document.getElementById('jsContainer');
    var table = container.querySelector('table');
    var current = table.querySelector('.current');
    var trs = table.querySelectorAll('tr');
    var tds = Array.from(table.querySelectorAll('td'));
    // 获取范围和当前位置
    var rows = trs.length; // 行数
    var totalLen = tds.length; // 总长度
    var cols = totalLen / rows; // 列数
    var currentIndex = tds.indexOf(current); // 当前位置

    // 清除当前样式
    tds[currentIndex].classList.remove('current');
    //计算下一个位置
    if (code === 37) {
      // left
      // 当前在左边 移动到右边
      if (currentIndex % cols === 0) currentIndex += cols - 1;
      else currentIndex -= 1;
    } else if (code === 38) {
      // up
      // 当前在上边 移动到下边
      if (currentIndex < cols) currentIndex += totalLen - cols;
      else currentIndex -= cols;
    } else if (code === 39) {
      // right
      // 当前在右边 移动到左边
      if (currentIndex % cols === cols - 1) currentIndex -= cols - 1;
      else currentIndex += 1;
    } else if (code === 40) {
      // down
      // 当前在下边 移动到上边
      if (currentIndex >= totalLen - cols) currentIndex -= totalLen - cols;
      else currentIndex += cols;
    }
    // 设置当前样式
    tds[currentIndex].classList.add('current');
  };
}

发表于 2021-11-11 16:07:49 回复(0)