如何为Advent Calendar设置各日历门仅指定日期可开启的功能

实现步骤 #

你只需要修改CSS和JavaScript两个文件即可，改动非常小：

第一步：新增未解锁门的样式（修改styles.css）

在styles.css文件末尾添加以下代码，用来区分可点击和不可点击的门：

/* 未解锁门样式 */
.text.locked {
  background-color: #cccccc;
  cursor: not-allowed;
  color: #666666;
}

第二步：添加日期判断逻辑（修改main.js）

首先在JS文件最顶部，原有变量声明的下方，新增一个获取当前可解锁最大门编号的函数：

// 获取当前可解锁的最大门编号
const getMaxÅbenDag = () => {
  const now = new Date();
  const month = now.getMonth() + 1; // getMonth返回0-11，+1后对应1-12月
  const day = now.getDate();
  // 仅12月按日期解锁，非12月默认全锁，测试时可以把返回值改成24查看所有门效果
  if (month === 12) {
    return Math.min(day, 24);
  }
  return 0;
}

然后修改原有startKalender函数里添加点击事件的逻辑，替换成以下代码：

const startKalender = () => {
  const maxUnlockDay = getMaxÅbenDag();
  for(let i = 0; i  < kalenderDage; i++) {
    const kalenderLåge = document.createElement("div");
    const kalenderLågeTekst = document.createElement("div");

    kalenderLåge.classList.add("image");
    kalenderLåge.style.gridArea = "låge" + (i +1);
    kalenderContainer.appendChild(kalenderLåge);

    kalenderLågeTekst.classList.add("text");
    kalenderLågeTekst.innerHTML = i + 1;
    kalenderLåge.appendChild(kalenderLågeTekst);

    const lågeNummer = i + 1;
    const coursePath = `./filer/låge${lågeNummer}.jpg`;

    // 判断门是否可解锁
    if (lågeNummer <= maxUnlockDay) {
      kalenderLågeTekst.addEventListener("click", åbenLåge.bind(null, coursePath));
    } else {
      kalenderLågeTekst.classList.add("locked");
      // 点击未解锁门弹出提示，不需要可以删掉这行
      kalenderLågeTekst.addEventListener("click", () => alert(`这扇门要12月${lågeNummer}号才能打开哦`));
    }
  }
}

注意：如果需要本地测试效果，只需要临时把getMaxÅbenDag函数里的返回值改成你想要测试的数字即可，比如改成5就能看到前5扇门可点击，后续门锁定的效果。

内容的提问来源于stack exchange，提问作者Freja