题解 | #移动控制#

移动控制

https://www.nowcoder.com/practice/84af7932f53f4bbeaa1fa079a138bb35

生成table.id == 'jsLayout'表格,m个tr,每个tr n个td(m>=1,n>=1),并随机选中一个td节点

bind函数:

    1.按下 方向键,找出td节点,并切换td节点

    2.在第一列往左移动则到达最后一列;在最后一列往右移动则到达第一列;在第一行往上移动则到达最后一行;在最后一行往下移动则到达第一行;

我先吐槽一下,明明说是要生成id=='Layout'的表格,结果测试是用game类获取table

    function bind() {
      // 在document上监听keydown事件
      document.onkeydown = event => {
        // 1、提供符合要求的event.keyCode 
        if (!event) return;
        var code = event.keyCode || '';
        // keyCode必须等于'37' '38' '39' '40'
        if (!{ '37': 1, '38': 1, '39': 1, '40': 1 }[code]) return;
        // 阻止默认行为,放置持续按压,触发多次
        event.preventDefault && event.preventDefault();
        // 2、根据keyCode控制行为
        //TODO: 请实现按键控制
        // 2.1找出高亮的td节点
        let jsLayout = document.querySelector('.game')
        let hightLightTd = jsLayout.querySelector('.current')
        // 2.2根据keyCode切换td
        switch (code) {
          // 左
          case 37:
            hightLightTd.classList.remove('current')
            let previousElement = hightLightTd.previousElementSibling

            if (!previousElement) {
              hightLightTd.parentNode.lastElementChild.classList.add('current')
              break
            }

            previousElement.classList.add('current')
            break
          // 上
          case 38:
            hightLightTd.classList.remove('current')

            let parentPriviousTr = hightLightTd.parentNode.previousElementSibling
            if (!parentPriviousTr) {
              hightLightTd.closest('tbody').lastElementChild.cells[hightLightTd.cellIndex].classList.add('current')
              break
            }

            parentPriviousTr.cells[hightLightTd.cellIndex].classList.add('current')
            break
          // 右
          case 39:
            hightLightTd.classList.remove('current')
            let nextElement = hightLightTd.nextElementSibling

            if (!nextElement) {
              hightLightTd.parentNode.firstElementChild.classList.add('current')
              break
            }

            nextElement.classList.add('current')
            break
          // 下
          case 40:
            hightLightTd.classList.remove('current')

            let parentNextTr = hightLightTd.parentNode.nextElementSibling
            if (!parentNextTr) {
              hightLightTd.closest('tbody').firstElementChild.cells[hightLightTd.cellIndex].classList.add('current')
              break
            }

            parentNextTr.cells[hightLightTd.cellIndex].classList.add('current')
            break
        }
      };
    };

全部评论

相关推荐

05-26 10:24
门头沟学院 Java
qq乃乃好喝到咩噗茶:其实是对的,线上面试容易被人当野怪刷了
点赞 评论 收藏
分享
评论
1
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务