题解 | #移动控制#
移动控制
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 } }; };