百度筆試題2018

時間 2020-06-29 標籤百度筆試

題外話

首先我要吐槽一下，csdn簡直是在做死啊，複製博文底下的那個引用太噁心了，我複製本身的博客，還有引用，啥玩意啊。。。
因此我決定換地方了，之後github（偏重代碼）和gitee（偏重知識）會常常更新。javascript

題目

就是讓你用es5寫代碼，實現點擊以後這樣。我感受就2個考點，一個是閉包，還有判斷特殊狀況。
這裏用到了閉包仍是令我挺吃驚的，由於你要循環給td加click事件，在事件裏要用到外面的i，由於是es5因此不能用let，只能用var，因此只有閉包能改變i的做用域。css

test.jshtml

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.htmljava

<!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> <!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>