2

我有 3 个 div：div0（绿色）、div1（黄色）、div2（红色）。所有这些都相互重叠。我每秒钟使用 setInterval 隐藏和显示 div1 和 div2 。如果 index = 4 或 6，我将显示红色 div，否则显示黄色 div。通过我下面的代码，它发生得很好。

我的要求是，当索引变为 8 时，我想暂停 setInterval 1 分钟，然后显示 div0（绿色），然后恢复 setInterval 的循环，直到调用 clearInterval。

如何在此处暂停 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

2

当它是 8 时，清除间隔并使用设置为一分钟的 setTimeout 来调用显示绿色的代码

于 2013-10-21T12:17:04.220 回答
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 回答
1

首先，使用带名称的函数有助于以更好的方式使用它们，并使您的代码易于阅读。这是我更改的代码。HTML代码和div隐藏功能是一样的。

使用变量轻松自定义脚本

var index = 0;
var paused = false;
var auto_refresh;
var pauseTimer;
var timeWaiting = 5000; //Set to 5 seconds. Set it to one minute
var timeStep = 1000;

隐藏 div，然后开始循环。

$(document).ready(function (){
    hideDiv();
    auto_refresh = setInterval(loop, timeStep);
});

使用 timeStep 定义的每次调用循环函数

function loop() {
    index += 1;

    if (index == 4 || index == 6) {
        showDiv2();
    } else if (index == 8){
        clearInterval(auto_refresh);
        hideDiv();
        //Setting a timeout to wait as defined
        pauseTimer = setTimeout(pauseAndPlay, timeWaiting - timeStep);
    } else {
        showDiv1();
    }

    if (index > 9) {
        clearInterval(auto_refresh);
    }
}

//函数处理等待时间并再次开始循环。

function pauseAndPlay(){
    index = 0; //Only if you want to start over
    auto_refresh = setInterval(loop, timeStep);
}

这是工作演示：jsfiddle.net/PwSfh

于 2013-10-21T14:14:00.100 回答
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 回答