拼多多前端笔试

2023.5.15

1.有一个列表片段，其中包含多个<li>元素，默认是白色背景，请用CSS/JS实现：

鼠标移入到<ul>时，将<li>的背景按奇偶分别设置成灰色和白色
鼠标移入的目标<li>，背景颜色设置为浅黄色
鼠标移出<li>，但还在<ul>内部时，移出的<li>背景颜色从浅黄色恢复到奇偶规则的背景颜色
鼠标移出<ul>时所有的背景颜色恢复白色

html

<ul id="list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
</ul>

解答如下：

html

<style>
    ul,
    li {
        background-color: white;
    }
    #list:hover li:nth-child(2n + 1) {
        background-color: gray;
    }
</style>
<script>
    var lis = document.querySelectorAll("#list li");
    lis.forEach(function(li) {
        li.addEventListener("mouseover", function() {
            this.style.backgroundColor = "lightyellow";
        });
        li.addEventListener("mouseout", function () {
            this.style.backgroundColor = "";
        });
    });
</script>

2.假设你在做一个固定信号发射器，每隔一段时间要打印一个信号，并不断循环整段信号5次，请使用Promise来完成实现：

首先发送1
200ms后发送0
100ms后发送1
150ms后发送0
300ms后重复上述4个信号直到共计循环5次

function sendSignalOne() {
  console.log(1);
}

function sendSignalZero() {
  console.log(0);
}

function delay(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

function executeFunctions() {
  let promise = Promise.resolve();
  let count = 0;

  function execute() {
    if (count >= 5) return;
    promise = promise
      .then(() => sendSignalOne())
      .then(() => delay(2000))
      .then(() => sendSignalZero())
      .then(() => delay(1000))
      .then(() => sendSignalOne())
      .then(() => delay(1500))
      .then(() => sendSignalZero())
      .then(() => delay(3000))
      .then(() => {
        count++;
        execute();
      });
  }
  execute();
}
executeFunctions();

3.链表实现两个大数相加。

function addBigInt(num1, num2) {
  const ans = new ListNode(0);
  let op = ans;
  let stepIn = 0;
  while (num1 || num2) {
    const n1 = num1?.val ?? 0;
    const n2 = num2?.val ?? 0;
    const sum = n1 + n2 + stepIn;
    stepIn = parseInt(sum / 10);
    const val = sum % 10;
    op.next = new ListNode(val);
    op = op.next;
    num1 = num1.next;
    num2 = num2.next;
  }
  if (stepIn) {
    op.next = new ListNode(stepIn);
  }
  return JSON.stringify(ans.next);
}

拼多多前端笔试 ​

2023.5.15 ​

拼多多前端笔试

2023.5.15