FED91. 移动控制
描述
界面中存在id=jsContainer的节点A，系统会随机生成id为jsLayout的 m行 x n列 表格(m >= 1, n >= 1)，并随机选中一个td节点，请按照如下需求实现bind函数
HTML/CSS/JavaScript 解法, 执行用时: 951ms, 内存消耗: 77836KB, 提交时间: 2021-07-09
{"css":"function bind() {\n\n document.onkeydown = event => {\n if (!event) return;\n var code = event.keyCode || '';\n if (!{'37': 1, '38': 1, '39': 1, '40': 1}[code]) return;\n event.preventDefault && event.preventDefault();\n //TODO: 请实现按键控制\n };\n}","js":"function bind() {\n // 获取元素节点\n var container = document.querySelector('#jsContainer')\n var current = container.querySelector('.current')\n // 表格的 行m 列n\n var m = container.querySelectorAll('tr')[0].querySelectorAll('td').length\n var n = container.querySelectorAll('tr').length\n\n document.onkeydown = event => {\n if (!event) return;\n var code = event.keyCode || '';\n if (!{ '37': 1, '38': 1, '39': 1, '40': 1 }[code]) return;\n event.preventDefault && event.preventDefault();\n\n // TODO: 请实现按键控制\n if (m > 1 && n > 1) {\n // 动态获取 current 横坐标 x \n var current = container.querySelector('.current')\n var x = 0\n var preNode = current\n while (preNode.previousElementSibling) {\n x++\n preNode = preNode.previousElementSibling\n }\n\n if (code === 39) { // 右键\n if (current.nextElementSibling) {\n current.nextElementSibling.className = 'current'\n } else { // 跳到第一行\n current.parentElement.children[0].className = 'current'\n }\n } else if (code === 37) { // 左键\n if (current.previousElementSibling) {\n current.previousElementSibling.className = 'current'\n } else { // 跳到最后一行\n current.parentElement.children[m - 1].className = 'current'\n }\n }\n else if (code === 38) { // 上键\n var current = container.querySelector('.current')\n if (current.parentElement.previousElementSibling) {\n current.parentElement.previousElementSibling.children[x].className = 'current'\n } else {\n current.parentElement.parentNode.children[n - 1].children[x].className = 'current'\n }\n } else if (code === 40) { // 下键\n var current = container.querySelector('.current')\n if (current.parentElement.nextElementSibling) {\n current.parentElement.nextElementSibling.children[x].className = 'current'\n } else {\n current.parentElement.parentElement.children[0].children[x].className = 'current'\n }\n }\n current.className = ''\n }\n\n };\n }","html":"<div id=\"jsContainer\">\n <table class=\"game\">\n <tbody>\n <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n <tr><td></td><td></td><td></td><td></td><td class=\"current\"></td><td></td><td></td><td></td><td></td></tr>\n <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n </tbody>\n </table>\n</div>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 985ms, 内存消耗: 77836KB, 提交时间: 2021-07-09
{"css":"table.game {\n font-size: 14px;\n border-collapse: collapse;\n width: 100%;\n table-layout: fixed;\n}\ntable.game td {\n border: 1px solid #e1e1e1;\n padding: 0;\n height: 30px;\n text-align: center;\n}\ntable.game td.current{\n background: #1890ff;\n}","js":"function bind() {\n\n document.onkeydown = event => {\n if (!event) return;\n var code = event.keyCode || '';\n if (!{'37': 1, '38': 1, '39': 1, '40': 1}[code]) {\n return;\n } \n event.preventDefault && event.preventDefault();\n //TODO: 请实现按键控制\n var tr = document.querySelectorAll('tr'); // 所有行\n var mL = tr.length;// 行数\n var td = document.querySelectorAll('tr:first-of-type td'); // 第一行\n var nL = td.length; // 第一行有多少列\n var tdAll = document.querySelectorAll('td'); // 所有格子\n var temp;\n for (var i = 0; i < tdAll.length; i++) {\n if (tdAll[i].className == 'current') {\n temp = i;//记录当前选中元素的下标\n tdAll[i].className = '';//去除当前选中元素的样式\n break;\n }\n }\n var row = parseInt(temp / nL) // 第几行,从0起\n var col = temp % nL\n if (code == '37') {//左\n //td:nth-of-type()第一个元素从1开始，所以不能直接用行列的值计算\n if (col == '0') {//如果在第一列往左移动则到达最后一列\n tr[row].querySelector('td:nth-of-type('+ Number(nL) +')').className = 'current'\n } else {//否则行不变，列-1\n tr[row].querySelector('td:nth-of-type('+ Number(col) +')').className = 'current'\n }\n } else if(code == '39') {//右\n if (col == nL - 1) {//如果在最后一列往右移动则到达第一列\n tr[row].querySelector('td:nth-of-type(1)').className = 'current'\n } else {//否则行不变，列＋1\n tr[row].querySelector('td:nth-of-type('+ Number(col+2) +')').className = 'current'\n }\n } else if(code == '38') {//上\n if (row == '0') {//如果在第一行往上移动则到达最后一行\n tr[mL-1].querySelector('td:nth-of-type('+ Number(col+1) +')').className = 'current'\n } else {//否则列不变，行-1\n tr[row-1].querySelector('td:nth-of-type('+ Number(col+1) +')').className = 'current'\n }\n } else if(code == '40') {//下\n if (row == mL - 1) {//如果在最后一行往下移动则到达第一行\n tr[0].querySelector('td:nth-of-type('+ Number(col+1) +')').className = 'current'\n } else {//否则列不变，行+1\n tr[row+1].querySelector('td:nth-of-type('+ Number(col+1) +')').className = 'current'\n }\n }\n };\n}","html":"<div id=\"jsContainer\">\n <table class=\"game\">\n <tbody>\n <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n <tr><td></td><td></td><td></td><td></td><td class=\"current\"></td><td></td><td></td><td></td><td></td></tr>\n <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n </tbody>\n </table>\n</div>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 987ms, 内存消耗: 77880KB, 提交时间: 2021-07-11
{"css":"table.game {\n font-size: 14px;\n border-collapse: collapse;\n width: 100%;\n table-layout: fixed;\n}\ntable.game td {\n border: 1px solid #e1e1e1;\n padding: 0;\n height: 30px;\n text-align: center;\n}\ntable.game td.current{\n background: #1890ff;\n}","js":"function bind() {\n // 获取元素节点\n var container = document.querySelector('#jsContainer')\n var current = container.querySelector('.current')\n // 表格的 行m 列n\n var m = container.querySelectorAll('tr')[0].querySelectorAll('td').length\n var n = container.querySelectorAll('tr').length\n\n document.onkeydown = event => {\n if (!event) return;\n var code = event.keyCode || '';\n if (!{ '37': 1, '38': 1, '39': 1, '40': 1 }[code]) return;\n event.preventDefault && event.preventDefault();\n\n // TODO: 请实现按键控制\n if (m > 1 && n > 1) {\n // 动态获取 current 横坐标 x \n var current = container.querySelector('.current')\n var x = 0\n var preNode = current\n while (preNode.previousElementSibling) {\n x++\n preNode = preNode.previousElementSibling\n }\n\n if (code === 39) { // 右键\n if (current.nextElementSibling) {\n current.nextElementSibling.className = 'current'\n } else { // 跳到第一行\n current.parentElement.children[0].className = 'current'\n }\n } else if (code === 37) { // 左键\n if (current.previousElementSibling) {\n current.previousElementSibling.className = 'current'\n } else { // 跳到最后一行\n current.parentElement.children[m - 1].className = 'current'\n }\n }\n else if (code === 38) { // 上键\n var current = container.querySelector('.current')\n if (current.parentElement.previousElementSibling) {\n current.parentElement.previousElementSibling.children[x].className = 'current'\n } else {\n current.parentElement.parentNode.children[n - 1].children[x].className = 'current'\n }\n } else if (code === 40) { // 下键\n var current = container.querySelector('.current')\n if (current.parentElement.nextElementSibling) {\n current.parentElement.nextElementSibling.children[x].className = 'current'\n } else {\n current.parentElement.parentElement.children[0].children[x].className = 'current'\n }\n }\n current.className = ''\n }\n\n };\n }\n","html":"<div id=\"jsContainer\">\n <table class=\"game\">\n <tbody>\n <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n <tr><td></td><td></td><td></td><td></td><td class=\"current\"></td><td></td><td></td><td></td><td></td></tr>\n <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n </tbody>\n </table>\n</div>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 990ms, 内存消耗: 77852KB, 提交时间: 2021-07-11
{"css":"table.game {\n font-size: 14px;\n border-collapse: collapse;\n width: 100%;\n table-layout: fixed;\n}\ntable.game td {\n border: 1px solid #e1e1e1;\n padding: 0;\n height: 30px;\n text-align: center;\n}\ntable.game td.current{\n background: #1890ff;\n}","js":"function bind() {\n\n document.onkeydown = event => {\n if (!event) return;\n var code = event.keyCode || '';\n if (!{'37': 1, '38': 1, '39': 1, '40': 1}[code]) return;\n event.preventDefault && event.preventDefault();\n //TODO: 请实现按键控制\n \n var tr = document.querySelectorAll('tr');\n var mL = document.querySelectorAll('tr').length;\n var td = document.querySelectorAll('tr:first-of-type td');\n var nL = document.querySelectorAll('tr:first-of-type td').length;\n \n var tdAll = document.querySelectorAll('td');\n var temp;\n for(var i = 0; i<tdAll.length; i++) {\n if(tdAll[i].className == 'current'){\n temp = i;\n tdAll[i].className = '';\n break;\n }\n }\n \n var row = parseInt(temp / mL);\n var col = temp % nL;\n if(code == '37'){\n if(col == '0'){\n tr[row].querySelector('td:nth-of-type('+ Number(nL) +')').className = 'current'\n } else {\n tr[row].querySelector('td:nth-of-type('+ Number(col) + ')').className = 'current'\n }\n } else if(code == '38'){\n if(row == '0'){\n tr[mL - 1].querySelector('td:nth-of-type('+Number(col+1) + ')').className = 'current'\n } else {\n tr[row-1].querySelector('td:nth-of-type('+ Number(col+1) + ')').className = 'current'\n }\n } else if(code == '39'){\n if(col == nL - 1 ){\n tr[row].querySelector('td:nth-of-type(1)').className = 'current'\n } else {\n tr[row].querySelector('td:nth-of-type('+ Number(col + 2) + ')').className = 'current'\n }\n } else if(code == '40'){\n if(row == mL -1){\n tr[0].querySelector('td:nth-of-type('+Number(col+1) + ')').className = 'current'\n } else {\n tr[row+1].querySelector('td:nth-of-type('+ Number(col+1) + ')').className = 'current'\n }\n }\n \n };\n}","html":"<div id=\"jsContainer\">\n <table class=\"game\">\n <tbody>\n <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n <tr><td></td><td></td><td></td><td></td><td class=\"current\"></td><td></td><td></td><td></td><td></td></tr>\n <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n </tbody>\n </table>\n</div>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1003ms, 内存消耗: 77864KB, 提交时间: 2021-07-03
{"css":"table.game {\n font-size: 14px;\n border-collapse: collapse;\n width: 100%;\n table-layout: fixed;\n}\ntable.game td {\n border: 1px solid #e1e1e1;\n padding: 0;\n height: 30px;\n text-align: center;\n}\ntable.game td.current{\n background: #1890ff;\n}","js":"function bind() {\n\n document.onkeydown = event => {\n if (!event) return;\n var code = event.keyCode || '';\n if (!{'37': 1, '38': 1, '39': 1, '40': 1}[code]) return;\n event.preventDefault && event.preventDefault();\n \n //TODO: 请实现按键控制\n // 获取当前位置\n const trs = Array.from(document.querySelectorAll('tr'))\n const maxTr = trs.length-1\n const maxTd = trs[0].children.length-1\n const currentTd = document.querySelector('.current')\n let j = Array.from(currentTd.parentNode.children).indexOf(currentTd)\n let i = trs.indexOf(currentTd.parentNode)\n \n // 定位\n if(code===37){ // 左\n j=j<=0?maxTd:j-1\n }else if(code===38){ // 上\n i=i<=0?maxTr:i-1\n }else if(code===39){ // 右\n j=j>=maxTd?0:j+1\n }else if(code===40){ // 下\n i=i>=maxTr?0:i+1\n }\n \n // 渲染\n currentTd.className=''\n trs[i].children[j].className='current'\n };\n}","html":"<div id=\"jsContainer\">\n <table class=\"game\">\n <tbody>\n <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n <tr><td></td><td></td><td></td><td></td><td class=\"current\"></td><td></td><td></td><td></td><td></td></tr>\n <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>\n </tbody>\n </table>\n</div>","libs":[]}