拼多多3.12 前端笔试代码题

笔试的时候写的3题都跑不起来。。一堆错误，整理了下能跑的版本

(不保证是对的

第一题：

<body>
  <div id="welcome"></div>
</body>

<script>
  function generateAndInsertContent() {
    const beginTime = new Date('2023-1-1').getTime();
    const endTime = new Date('2024-1-1').getTime() - (24 * 60 * 60 * 1000);
    const halfYear = 180 * 24 * 60 * 60 * 1000;
    const today = new Date();
    let todayTime = today.getTime();
    const dayNums = Math.floor((todayTime - beginTime) / (1000 * 60 * 60 * 24));
    let str = `今天是${today.getUTCFullYear()}年的第<span style=\"color:red;\">${dayNums}<\/span>天，`;
    if(todayTime - beginTime <= halfYear) {
       str += '你好，上半年！';
    } else if(todayTime - beginTime > endTime && todayTime - beginTime < (new Date('2024-1-1').getTime())) {
        str += '明年见！';
    } else {
        str += `再见了，上半年！你好，下半年！`;
    }
    document.getElementById('welcome').innerHTML = str;
}

generateAndInsertContent();
</script>

第二题：

<div id="card" class="card">
  <div id="quickBtn" class="quick-btn">quick look</div>
</div>

<script>
  function clickCard(e) {
    alert('card click');
  }
  function clickBtn(e) {
    e.stopPropagation();
    alert('quick look click');
  }
  const card = document.getElementById('card');
  card.addEventListener('click', clickCard);
  const btn = document.getElementById('quickBtn');
  btn.addEventListener('click', clickBtn);
  card.addEventListener('mouseenter', function() {
    btn.style.display = 'block';
  });
  card.addEventListener('mouseleave', function() {
    btn.style.display = 'none';
  });
</script>

<style>
.card {
  position: relative;
  width: 256px;
  height: 256px;
  background-color: #f4f4f4;
}
.quick-btn {
  display: none;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 92px;
  height: 27px;
  padding: 5px;
  font-size: 16px;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 15px;
}
</style>

第三题：

async function preloadImage(imgUrls, timeout) {
    let allOk = true;   //  x秒内是否全部响应完成
    await Promise.all(imgUrls.map(imgUrl => requestImage(imgUrl, new Date().getTime()))
      .map(item => {  //  捕获所有 promise 的 reject，输出加载失败信息
        return item.catch(errMsg => {
          console.log(errMsg)
        })
      })).then((reslist) => {
        reslist.forEach(costTime => {
          if(costTime > timeout) {  //  有请求超时了
            allOk = false;
          }
        })
      })
      
  if(!allOk) {
    console.log(`resource load cost over ${timeout} ms`);
  }
}

//  模拟请求单张图片，入参：单个图片url、开始请求的时间
const requestImage = async(imgUrl, beginTime) => new Promise((resolve, reject) => {
  if(Math.random() < 0.7)  //    一定概率是请求成功的
    setTimeout(() => resolve(new Date().getTime() - beginTime), 1000);
  else
    setTimeout(() => reject(`${imgUrl} load fail`), 1000);
});

preloadImage(['1.png', '2.png', '3.png'], 1002);

#笔试复盘##拼多多笔试#