基于JavaScript实现年份数字拼图效果

const rowCount = 7;
const colCount = 17;
// 创建卡片
const createCard = () => {
  const frag = document.createDocumentFragment();
  for (let i = 0; i < rowCount; i++) {
    for (let j = 0; j < colCount; j++) {
      const item = document.createElement('div');
      item.className = "item";
      frag.appendChild(item);
    }

  }
  document.querySelector('.container').appendChild(frag);
}

// 0-9数字的坐标形状
const NUMBER_MATRIX = [
  [
    // 0
    [0, 0],
    [1, 0],
    [2, 0],
    [0, 1],
    [2, 1],
    [0, 2],
    [2, 2],
    [0, 3],
    [2, 3],
    [0, 4],
    [1, 4],
    [2, 4]
  ],
  [
    // 1
    [1, 0],
    [0, 1],
    [1, 1],
    [1, 2],
    [1, 3],
    [0, 4],
    [1, 4],
    [2, 4]
  ],
  [
    // 2
    [0, 0],
    [1, 0],
    [2, 0],
    [2, 1],
    [0, 2],
    [1, 2],
    [2, 2],
    [0, 3],
    [0, 4],
    [1, 4],
    [2, 4]
  ],
  [
    // 3
    [0, 0],
    [1, 0],
    [2, 0],
    [2, 1],
    [0, 2],
    [1, 2],
    [2, 2],
    [2, 3],
    [0, 4],
    [1, 4],
    [2, 4]
  ],
  [
    // 4
    [0, 0],
    [2, 0],
    [0, 1],
    [2, 1],
    [0, 2],
    [1, 2],
    [2, 2],
    [2, 3],
    [2, 4]
  ],
  [
    // 5
    [0, 0],
    [1, 0],
    [2, 0],
    [0, 1],
    [0, 2],
    [1, 2],
    [2, 2],
    [2, 3],
    [0, 4],
    [1, 4],
    [2, 4]
  ],
  [
    // 6
    [0, 0],
    [1, 0],
    [2, 0],
    [0, 1],
    [0, 2],
    [1, 2],
    [2, 2],
    [0, 3],
    [2, 3],
    [0, 4],
    [1, 4],
    [2, 4]
  ],
  [
    // 7
    [0, 0],
    [1, 0],
    [2, 0],
    [2, 1],
    [2, 2],
    [2, 3],
    [2, 4]
  ],
  [
    // 8
    [0, 0],
    [1, 0],
    [2, 0],
    [0, 1],
    [2, 1],
    [0, 2],
    [1, 2],
    [2, 2],
    [0, 3],
    [2, 3],
    [0, 4],
    [1, 4],
    [2, 4]
  ],
  [
    // 9
    [0, 0],
    [1, 0],
    [2, 0],
    [0, 1],
    [2, 1],
    [0, 2],
    [1, 2],
    [2, 2],
    [2, 3],
    [0, 4],
    [1, 4],
    [2, 4]
  ]
];

// 根据数字形状、当前年份等信息，筛选出需要设置为亮色的卡片位置
const getHighlight = () => {
  // 获取当前年份
  let year = new Date().getFullYear() + "";
  let step = 4,
    xoffset = 1,
    yoffset = 1,
    highlight = [];

  year.split('').forEach(n => {
    highlight = highlight.concat(
      NUMBER_MATRIX[n].map(item => {
        return `${item[0] + xoffset}-${item[1] + yoffset}`;
      })
    );
    xoffset += step;
  });

  return highlight;
}

const createHighLight = async (cards, hightLight) => {
  for (let i = 0; i < hightLight.length; i++) {
    const [col, row] = hightLight[i].split('-');
    const index = Math.floor(row) * colCount + Math.floor(col);
    cards[index].className = 'item highlight'
  }
}

const createHighLight = async (cards, hightLight) => {
  for (let i = 0; i < hightLight.length; i++) {
    await new Promise((resolve, reject) => setTimeout(resolve, 100));
    const [col, row] = hightLight[i].split('-');
    const index = Math.floor(row) * colCount + Math.floor(col);
    cards[index].className = 'item highlight'
  }
  // 绘制结束后，循环绘制
  await new Promise((resolve, reject) => setTimeout(resolve, 100));
  drawData(); 
}