div0 (緑)、div1 (黄色)、div2 (赤) の 3 つの div があります。すべてが重なり合っています。setInterval を使用して、1 秒ごとに div1 と div2 を非表示および表示しています。インデックス = 4 または 6 の場合、赤い div を表示しています。それ以外の場合は黄色の div を表示しています。以下のコードでうまくいきます。
私の要件は、インデックスが 8 になったら、setInterval を 1 分間一時停止し、それまで div0 (緑) を表示し、その後 clearInterval が呼び出されるまで setInterval のループを再開することです。
ここで setInterval を一時停止して、緑色のマスクを表示するにはどうすればよいですか?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sample Application</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var index=0;
$(document).ready(function(){
hideDiv();
var auto_refresh = setInterval(function() {
index+=1;
//if(index = 8)
//{
//code to pause the setInterval for 60 seconds and show div0
//}
if(index == 4 || index==6)
{
showDiv2();
}
else
{
showDiv1();
}
if (index > 9)
{
clearInterval(auto_refresh);
}
}, 1000);
});
function hideDiv()
{
document.getElementById("div0").style.visibility="hidden";
document.getElementById("div1").style.visibility="hidden";
document.getElementById("div2").style.visibility="hidden";
}
function showDiv0()
{
document.getElementById("div0").style.visibility="visible";
document.getElementById("div1").style.visibility="hidden";
document.getElementById("div2").style.visibility="hidden";
}
function showDiv1()
{
document.getElementById("div1").style.visibility="visible";
document.getElementById("div0").style.visibility="hidden";
document.getElementById("div2").style.visibility="hidden";
document.getElementById("div1").innerHTML=index;
}
function showDiv2()
{
document.getElementById("div2").style.visibility="visible";
document.getElementById("div0").style.visibility="hidden";
document.getElementById("div1").style.visibility="hidden";
document.getElementById("div2").innerHTML=index;
}
</script>
</head>
<body>
<div id="container" style="position:relative;">
<div id="div0" style="background:green;height:200px;width:200px;margin:0;position:absolute">Relaxing for a minute</div>
<div id="div1" style="background:yellow;height:200px;width:200px;margin:0;position:absolute">This is div1</div>
<div id="div2" style="background:red;height:200px;width:200px;margin:0;position:absolute">This is div2</div>
</div>
</body>
</html>