2

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>
4

4 に答える 4

1

匿名の代わりに名前付き関数を使用します。主なアイデアは次のとおりです。

if(index == 8) // Be carefull - you have index = 8 in your code snippet now
{
  clearInterval(auto_refresh);
  // Do your stuff with divs
  auto_refresh = setInterval(yourFunctionName, 6000);
}

PS: また、jQuery を使用している場合 (スクリプト タグと投稿のタグ リストからわかるように)、Timer プラグインを使用できます。

timer = $.timer(function() {
// your code
}, 1000, true);

でタイマーを一時停止し、timer.pause()で再開できtimer.play()ます。

于 2013-10-21T12:23:08.267 に答える
0

皆様のご協力により、無事に合格することができました。どうもありがとうございました。完全なコードを投稿しています。

<!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;    
    var auto_refresh = 0;
    $(document).ready(function(){
    hideDiv();
    auto_refresh = setInterval(function(){myTimer()}, 1000);

    });

    function myTimer() 
    {
            index+=1;

            if(index == 4 || index==6)
            {
              showDiv2();
            }   

            else if (index == 8) 
            {
              clearInterval(auto_refresh);
              showDiv0();
              auto_refresh = setInterval(function(){myTimer()}, 5000);  //Now run after 5 seconds
            }

            else if (index > 12) 
            {
              clearInterval(auto_refresh);
            }       

            else
            {
              showDiv1();
            }

        }

    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 5 seconds</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>
于 2013-10-22T05:11:30.127 に答える