百度筆試題2018
阿新 • • 發佈:2018-12-13
題外話
首先我要吐槽一下,csdn簡直是在作死啊,複製博文底下的那個引用太噁心了,我複製自己的部落格,還有引用,啥玩意啊。。。 所以我決定換地方了,以後github(偏重程式碼)和gitee(偏重知識)會經常更新。
題目
就是讓你用es5寫程式碼,實現點選之後這樣。我感覺就2個考點,一個是閉包,還有判斷特殊情況。 這裡用到了閉包還是令我挺吃驚的,因為你要迴圈給td加click事件,在事件裡要用到外面的i,因為是es5所以不能用let, 只能用var,所以只有閉包能改變i的作用域。
test.js
let cc = (...val) => console.log(...val);
// ---
var tds = document.querySelectorAll('td');
// cc(tds);
for (var i = 0; i < tds.length; i++) {
// 這裡用到了閉包,改變i的作用域
(function (i) {
tds[i].onclick = function () {
cle();
// cc(this);
// cc(i);
play(i);
}
})(i)
}
// 清除顏色
function cle() {
for (var i = 0; i < tds.length; i++) {
tds[i].classList = '';
}
}
// 把9個設class
function play(x) {
tds[x].classList = 'main';
if (Math.floor((x - 1) / 10) === Math.floor(x / 10)) {
tds[x - 1].classList = 'color';
}
if (Math.floor((x + 1) / 10) === Math.floor(x / 10)) {
tds[x + 1].classList = 'color';
}
if (x - 10 >= 0) {
tds[x - 10].classList = 'color';
if (Math.floor((x - 1 - 10) / 10) === Math.floor((x - 10) / 10)) {
tds[x - 1 - 10].classList = 'color';
}
if (Math.floor((x + 1 - 10) / 10) === Math.floor((x - 10) / 10)) {
tds[x + 1 - 10].classList = 'color';
}
}
if (x + 10 < 100) {
tds[x + 10].classList = 'color';
if (Math.floor((x - 1 + 10) / 10) === Math.floor((x + 10) / 10)) {
tds[x - 1 + 10].classList = 'color';
}
if (Math.floor((x + 1 + 10) / 10) === Math.floor((x + 10) / 10)) {
tds[x + 1 + 10].classList = 'color';
}
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
td {
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid;
}
table {
border-spacing: 0px;
}
.color {
background-color: rgb(72, 233, 233);
}
.main {
background-color: rgb(58, 61, 214);
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td class="color"></td>
<td class="main"></td>
<td class="color"></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>
<td></td>
</tr>
<tr>
<td></td>
<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>
<td></td>
</tr>
<tr>
<td></td>
<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>
<td></td>
</tr>
<tr>
<td></td>
<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>
<td></td>
</tr>
<tr>
<td></td>
<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>
<td></td>
</tr>
</table>
<script src="./src/test.js"></script>
</body>
</html>