出现日历，如何使其在特定日期可访问？答案

【问题标题】：Adventcalender, how to make it accessible on a specific date?出现日历，如何使其在特定日期可访问？
【发布时间】：2021-12-20 18:22:01
【问题描述】：

所以我正在制作一个降临日历，并且已经做好了布局并可以打开门。但是如何将其设置为在特定日期打开？我对编码很陌生，所以我不知道从哪里开始。

我有一个 index.html 文件一个css文件和一个java文件

const kalenderKnap = document.querySelector(".btn-start");
const kalenderContainer = document.querySelector(".container");

const kalenderDage = 24;

const åbenLåge = (path, event) => {
event.target.parentNode.style.backgroundImage = `url(${path})`;
event.target.style.opacity = "0";
event.target.style.backgroundColor = "lightblue";
}

const startKalender = () => {
  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);

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

    kalenderLågeTekst.addEventListener("click", åbenLåge.bind(null, coursePath));
  }
}

kalenderKnap.addEventListener("click", startKalender);

* {
  box-sizing: border-box;
}

.btn-start {
  background-color: darkred;
  color: white;
  border: 2px solid black;
  border-radius: 15px;
  margin: 15px auto;
  display: block;
  width: 10rem;
  height: 2rem;
}

.container {
  width: 800px;
  height: 900px;
  border: 5px solid black;
  margin: 15px auto;
  background-image: url("./filer/baggrund1.jpg");
  background-size: cover;
  display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-template-rows: repeat(6, 1fr);
  grid-template-areas:
      "låge7 låge8 låge2 låge6"
      "låge3 låge13 låge5 låge23"
      "låge17 låge21 låge19 låge14"
      "låge24 låge4 låge9 låge12"
      "låge10 låge15 låge1 låge18"
      "låge16 låge20 låge11 låge22";

}
.image {
  background-image: none;
  background-size: cover;
  background-position: center;
}

.text {
  height: 100%;
  width: 100%;
  color: solid black;
  padding: 10px;
  border: 2px solid black;
  transition: opacity 2s;
}

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
    <title>Julekalender</title>
  </head>

  <body>
    <button class="btn-start">Start Julekalender</button>
    <div class="container">
    </div>
    <script src="main.js"></script>

</div>

  </body>

</html>

那么我如何让每扇门在特定日期打开，我应该把它放在哪里？

【问题讨论】：

标签： javascript html date

【解决方案1】：

您可以使用日期对象来做到这一点。只需将其添加到您的 åbenLåge-Function：

const åbenLåge = (path, event) => {
    var date = new Date();
    if(date.getDate() == event.target.innerHTML)  {
        ...
    }
}

这将检查所选数字是否对应于今天的日期。所以例如今天你只能点击编号为 7 的门。

这是编辑后的小提琴：

const kalenderKnap = document.querySelector(".btn-start");
const kalenderContainer = document.querySelector(".container");

const kalenderDage = 24;

const åbenLåge = (path, event) => {
    var date = new Date();
    if(date.getDate() == event.target.innerHTML)  {
        event.target.parentNode.style.backgroundImage = `url(${path})`;
        event.target.style.opacity = "0";
        event.target.style.backgroundColor = "lightblue";
    }
}

const startKalender = () => {
  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);

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

    kalenderLågeTekst.addEventListener("click", åbenLåge.bind(null, coursePath));
  }
}

kalenderKnap.addEventListener("click", startKalender);

* {
    box-sizing: border-box;
  }
  
  .btn-start {
    background-color: darkred;
    color: white;
    border: 2px solid black;
    border-radius: 15px;
    margin: 15px auto;
    display: block;
    width: 10rem;
    height: 2rem;
  }
  
  .container {
    width: 800px;
    height: 900px;
    border: 5px solid black;
    margin: 15px auto;
    background-image: url("./filer/baggrund1.jpg");
    background-size: cover;
    display: grid;
    grid-template-columns: repeat(4, 25%);
    grid-template-rows: repeat(6, 1fr);
    grid-template-areas:
        "låge7 låge8 låge2 låge6"
        "låge3 låge13 låge5 låge23"
        "låge17 låge21 låge19 låge14"
        "låge24 låge4 låge9 låge12"
        "låge10 låge15 låge1 låge18"
        "låge16 låge20 låge11 låge22";
  
  }
  .image {
    background-image: none;
    background-size: cover;
    background-position: center;
  }
  
  .text {
    height: 100%;
    width: 100%;
    color: solid black;
    padding: 10px;
    border: 2px solid black;
    transition: opacity 2s;
  }

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
    <title>Julekalender</title>
  </head>

  <body>
    <button class="btn-start">Start Julekalender</button>
    <div class="container">
    </div>
    <script src="main.js"></script>

</div>

  </body>

</html>

【讨论】：

【解决方案2】：

您可以像这样将对象作为参数传递：

const åbenLåge = (kalenderLågeTekst, event) => {
    var date = new Date();
    if(date.getDate() == kalenderLågeTekst.day)  {
        ...
    }

}

const startKalender = () => {
  for(let i = 0; i  < kalenderDage; i++) {
    ....

    kalenderLågeTekst.path = coursePath;
    kalenderLågeTekst.day = lågeNummer;
    
    kalenderLågeTekst.addEventListener("click", åbenLåge.bind(null, kalenderLågeTekst));
  }
}

【讨论】：