百度笔试题2018

最新推荐文章于 2020-09-04 18:16:45 发布

s1124yy

最新推荐文章于 2020-09-04 18:16:45 发布

阅读量2.7k

点赞数

本文链接：https://blog.youkuaiyun.com/s1124yy/article/details/82943370

版权

题外话

首先我要吐槽一下，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>