如何在setInterval结束时显示元素

我想在当前setInterval("fillUp"(结束时显示一个元素("hidText"(。我试图在fillUp函数中添加一个if函数，但它无法执行。有办法解决这个问题吗？谢谢

let blankSquare = document.querySelectorAll(".square");
let hidText = document.querySelector(".hidText");
let index = 0;
function fillUp() {
setInterval(() => {
blankSquare[index++].classList.add("fill")
}, 1000);
if (index >= 4) {
hidText.classList.add("display")
}
}
fillUp();

.square {
margin: 1vh;
height: 3vh;
width: 3vh;
background-color: none;
border: solid 2px grey;
}
.fill {
background-color: grey;
}
.hidText {
display: none;
}
.display {
display: all;
}

<div class="squares">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<p class="hidText"> Hello There </p>

请改用display: block;。

此外，不要忘记清除间隔，否则它将无限期地继续。

let blankSquare = document.querySelectorAll(".square");
let hidText = document.querySelector(".hidText");
function fillUp() {
let index = 0;
const timer = setInterval(() => {
blankSquare[index++].classList.add("fill")

if (index >= blankSquare.length) {
clearInterval(timer)
hidText.classList.add("display")
}
}, 1000);
}
fillUp();

.square {
margin: 1vh;
height: 3vh;
width: 3vh;
background-color: none;
border: solid 2px grey;
}
.fill {
background-color: grey;
}
.hidText {
display: none;
}
.display {
display: block;
}

<div class="squares">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<p class="hidText"> Hello There </p>

有几个小错误。不过很简单。

要更改元素的CSS属性，可以在JS中的元素的styles属性中访问它
此外，在不需要的时候让间隔运行，以及让它尝试更改列表中的越界元素，通常都是不好的做法。

let blankSquare = document.querySelectorAll(".square");
let hidText = document.querySelector(".hidText");
let index = 0;
var interval = setInterval(() => {
if (blankSquare.length == index) {
hidText.style.display = "block";
clearInterval(interval);
}
else
blankSquare[index++].classList.add("fill")
}, 1000);

.square {
margin: 1vh;
height: 3vh;
width: 3vh;
background-color: none;
border: solid 2px grey;
}
.fill {
background-color: grey;
}
.hidText {
display: none;
}
.display {
display: all;
}

<div class="squares">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<p class="hidText"> Hello There </p>

您的if现在位于setInterval内。

请记住，SetInterval()不会停止，因此您需要调用ClearInterval()

ClearInterval需要一个ID才能工作，所以我们可以使用let或const

let myIntervalId = setInterval(() => {
/* your code */
}

现在通过ID

clearInterval(myInterval);

现在if不再有>=，而是>，所以我们也可以做第五个元素

在CSS中没有任何display: all，你基本上可以使用grid、flex或block，或者CSS支持的任何东西(在这一切中都不是soported(

let blankSquare = document.querySelectorAll(".square");
let hidText = document.querySelector(".hidText");
let index = 0;
function fillUp() {
let myInterval = setInterval(() => {
blankSquare[index++].classList.add("fill")
console.log("index: " + index);
if (index > 4) {
hidText.classList.add("display");
console.log("index: " + index + " so is hidden now");
/* stop the setInterval */
clearInterval(myInterval);
}
}, 1000);
}
fillUp();

.square {
margin: 1vh;
height: 3vh;
width: 3vh;
background-color: none;
border: solid 2px grey;
}
.fill {
background-color: grey;
}
.hidText {
display: none;
}
.display {
display: grid;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="./app.js" defer></script>
</head>
<body>
<div class="squares">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<p class="hidText"> Hello There </p>
</body>
</html>

相关内容

最新更新

热门标签：