我知道這個問題以前有人問過，但我的問題有點不同，我自己找不到解決辦法。我有兩個div。container和container2。container2默認是隱藏的，所以我希望每隔60秒，container被隱藏，container2被顯示。我繞過了一些代碼，我相信我已經接近了解決方案，但我沒有完全得到它，以下是我的代碼：
window.onload = function（）{
setInterval（function() {
document.getElementById('container2') 。 style.display = 'flex'。
document.getElementById('container')。 style.display = 'none'。
}, 60000）。)
};
#container {
display: flex;
}
#container2 {
display: none;
現在，當網站加載時顯示container，然后在60秒后顯示container2，但60秒后不會再回到顯示container。我明白為什么會出現這種情況，只是不知道如何解決。我留下了一個小的代碼片段來演示我的意思（為了演示，我把時間從1分鐘改為5秒）
window.onload = function() {
setInterval（function() {
document.getElementById('container2') 。 style.display = 'flex'。
document.getElementById('container')。 style.display = 'none'。
}, 5000); //在這個演示中把時間從1分鐘改為5秒。
};html, body {
font-family: Arial, Helvetica, sans-serif;
background-color: #343E59。
}
#container {
display: flex;
width: 800px;
margin: auto;
flex-direction: column-reverse;
justify-content: center;
color: white;
}
#container2 {
display: none;
width: 800px;
margin: auto;
flex-direction: column-reverse;
justify-content: center;
color: white;
}
.title {
display: flex;
justify-content: space-evenly;
}<!DOCTYPE html>
<html lang="en">
<head>/span>
<meta charset="UTF-8">/span>
< meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
< link rel="styleheet" type="text/css" href="style. css">
<title>Redmine Monitor</title>/span>
</head>/span>
<body>
<div id="container"/span>>
容器
</div>容器
<div id="container2">
容器2
</div> Container2
<script src="https://cdnjs. cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>/span>
<script src="script。 js"></script>>
<script src="https://cdnjs.cloudflare. com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.js"></script>/span>
<script src="https://cdn. jsdelivr.net/npm/apexcharts"></script> uj5u.com熱心網友回復：
一個基本的if陳述句就可以解決這個問題。
window.onload = function（）{
setInterval（function() {
if (document.getElementById('container2'). style.display == "flex") {
document.getElementById('container2')。 style.display = "none"。
document.getElementById('container')。 style.display = "flex"。
} else {
document.getElementById('container2')。 style.display = "flex";
document.getElementById('container')。 style.display = "none"。
}
}, 5000）。)
uj5u.com熱心網友回復：
你不是在切換
使用一個類使用一個類
。window。 addEventListener("load",function() {
const container = document. getElementById('container2'), container2 =document. getElementById（'container'）。
setInterval（function() {
container.classList.toggle("hide"/span>)
container2.classList.toggle("hide")
}, 1000）。)
});html,
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #343E59。
}
#container {
display: flex;
width: 800px;
margin: auto;
flex-direction: column-reverse;
justify-content: center;
color: white;
}
#container2 {
display: flex;
width: 800px;
margin: auto;
flex-direction: column-reverse;
justify-content: center;
color: white;
}
.title {
display: flex;
justify-content: space-evenly;
}
.hide { display: none ! important; } <div id="container"> /span>
容器
</div>容器
< div id="container2" class="hide">
容器2
</div>/span>uj5u.com熱心網友回復：
把函式改為：
setInterval（function() {
const c1 = document.getElementById('container') 。
const c2 = document.getElementById('container2') 。
[c1, c2].forEach(el => {
el.style.display = el.style.display == 'flex' ? 'none' : 'flex';
})
}, 60000）。)
uj5u.com熱心網友回復：
你必須根據container和container2的當前顯示來切換顯示，同時你必須在javascript中設定初始顯示，否則它將不會回傳c.style.display屬性。
window.onload = function() {
const c = document.getElementById('container') 。
const c2= document.getElementById('container2') 。
c.style.display = 'flex'。
c2.style.display = 'none';
setInterval（function() {
c.style.display = c.style.display == 'none' ? 'flex' : 'none';
c2.style.display = c2.style.display == 'none' ? 'flex' : 'none';
}, 5000); //為這個演示將時間從一分鐘改為5秒。
};html, body {
font-family: Arial, Helvetica, sans-serif;
background-color: #343E59。
}
#container {
display: flex;
width: 800px;
margin: auto;
flex-direction: column-reverse;
justify-content: center;
color: white;
}
#container2 {
display: none;
width: 800px;
margin: auto;
flex-direction: column-reverse;
justify-content: center;
color: white;
}
.title {
display: flex;
justify-content: space-evenly;
}<!DOCTYPE html>
<html lang="en">
<head>/span>
<meta charset="UTF-8">/span>
< meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
< link rel="styleheet" type="text/css" href="style. css">
<title>Redmine Monitor</title>/span>
</head>/span>
<body>
<div id="container"/span>>
容器
</div>容器
<div id="container2">
容器2
</div> Container2
<script src="https://cdnjs. cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>/span>
<script src="script。 js"></script>>
<script src="https://cdnjs.cloudflare. com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.js"></script>/span>
<script src="https://cdn. jsdelivr.net/npm/apexcharts"></script> uj5u.com熱心網友回復：
使用一個類來設定第二個容器為hidden。然后你可以使用querySelectorAll來拾取容器，然后遍歷它們來切換它們的開與關。(我在這里使用了setTimeout，因為我覺得它更直觀。
const containers = document. querySelectorAll('div') 。
function loop（） {
setTimeout(() => {
containers.forEach(container => {
container.classList.toggle（'hidden'）。
});
loop()。
}, 1000）。)
}
loop(); div { display: flex; }
.hidden { display: none; }< div>一</div>
<div class="hidden"/span>> Two</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/321907.html
標籤：
上一篇：為什么比較結果與預期不同？