所以我正在制作一個降臨節日歷，并且已經完成了布局并使開門成為可能。但是如何將其設定為在特定日期打開？我對編碼很陌生，所以我不知道從哪里開始。
我有一個 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>那么我如何讓每扇門在特定日期打開，我把它放在哪里？
uj5u.com熱心網友回復：
您可以使用 Date-Object 執行此操作。只需將此添加到您的 ?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>uj5u.com熱心網友回復：
您可以將物件作為引數傳遞，如下所示：
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));
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/351786.html
標籤：javascript html 日期