百度 笔试
自己复盘了一下代码的第一题，奈何做的时候没能做出来，气啊
第一题大致是要实现一个表格，里面随机给其中一个单元格设置一个样式，然后通过上下左右可以移动这个单元格
代码如下，感兴趣的盆友可以自己玩玩，要是有bug也请告知一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
td {
width: 100px;
height: 50px;
/* border: 1px solid red; */
}
.current {
background-color: red;
}
</style>
</head>
<body style="display: flex; justify-content: center;">
<table cellspacing="0" cellpadding="0" border="1">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="current"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script>
window.onkeyup = function (e) {
if (e.keyCode !== 37 || e.keyCode !== 38 || e.keyCode !== 39 || e.keyCode !== 40) return;
let current = document.getElementsByClassName('current')[0];
let tdNodes = [...current.parentNode.children];
let td_i = tdNodes.indexOf(current); // 2
let trNodes = [...current.parentNode.parentNode.children];
let tr_i = trNodes.indexOf(current.parentNode); // 5
let upNode =
tr_i === 0 ?
trNodes[8].children[td_i === 0 ? 8 : td_i - 1] :
trNodes[tr_i === 0 ? 8 : tr_i - 1].children[td_i];
let downNode =
tr_i === 8 ?
trNodes[0].children[td_i === 8 ? 0 : td_i + 1] :
trNodes[tr_i === 8 ? 0 : tr_i + 1].children[td_i];
let leftNode =
td_i === 0 ?
trNodes[tr_i === 0 ? 8 : tr_i - 1].children[8] :
tdNodes[td_i - 1];
let rightNode =
td_i === 8 ?
trNodes[tr_i === 8 ? 0 : tr_i + 1].children[0] :
tdNodes[td_i + 1];
if (e.keyCode === 37) { // left
leftNode.setAttribute('class', 'current');
current.removeAttribute('class');
} else if (e.keyCode === 38) { // up
upNode.setAttribute('class', 'current');
current.removeAttribute('class');
} else if (e.keyCode === 39) { // right
rightNode.setAttribute('class', 'current');
current.removeAttribute('class');
} else if (e.keyCode === 40) { // down
downNode.setAttribute('class', 'current');
current.removeAttribute('class');
}
}
</script>
</body>
</html>
全部评论
(0) 回帖