每隔5分钟显示div javascript

Question

我有一个javascript代码，只在5分钟后显示DIV一次，但我希望该脚本执行/显示DIV ID＆＃34; off＆＃34;每5分钟再次......

我该怎么做？

<div id="off">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</div>

<script>
var div = document.getElementById('off');
div.style.display = 'none';
setTimeout(function() {
    div.style.display = 'block';
}, 5 * 60000);
</script>

Answer 1

使用setInterval()

setInterval(function() {
    div.style.display = 'block';
}, 5 * 60000);

如果在某些时候你想要停止你的间隔滴答，你应该使用它分配给一个函数表达式，如：

var myIntv = setInterval(function() {
    div.style.display = 'block';
}, 5 * 60000);


// (let's say we're inside a button click event)
// clearInterval( myIntv ); // Stop it

<强> jsBin demo

使用setTimeout()

function doSomething (){
    div.style.display = 'block';
    setTimeout(doSomething, 5 * 60000); // Recall
}

doSomething(); // Start

<强> jsbin demo

Answer 2

请删除＆＃34;我在Div＆＃34;从代码中，它将根据您的需要为您服务：

＆＃13;

＆＃13;

<div id="off" style="display:none">I am inside the Div
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</div>

<script>
   
var div = document.getElementById('off');
setInterval(function(){
var style = div.offsetWidth > 0 || div.offsetHeight > 0;
                      
if(style){ 
document.getElementById('off').style.display="none";
}else{
document.getElementById('off').style.display="block";
}
 }, 300000);  


</script>

＆＃13;

＆＃13;

＆＃13;

Answer 3

可能不是解决此问题的最有效方法，但它可行。你认为合适的调整。

var myVar = setInterval(myTimer, 1000);
    var oncount=0;
    var offcount=0;
    var bool=true;
    function myTimer() {
      if (bool){
         oncount+=1
         document.getElementById("demo").style.display='block';
         if (oncount==300)
          {
            bool=false;
            oncount=0;
          }
       }

      if (bool==false){
          offcount+=1
          document.getElementById("demo").style.display='none';
          if (offcount==300){
            bool=true;
            offcount=0
          }
       }  
  }

Answer 4

使用setInterval可以随时执行。也可以使用==确保无阻塞或阻止。

<script>
var div = document.getElementById('off');
setInterval(function(){
    changingDiv();
},5*6000);

function changingDiv(){
  if(div.style.display == 'none' || div.style.display == ""){
    div.style.display = 'block';
  }
  else{
    div.style.display = 'none';
  }
}
</script>

Answer 5

如果我正确理解你，你想在5分钟后显示一个元素，然后在5分钟后再次隐藏它（如果不是这样的话，请编辑你的问题以澄清）。

不清楚的是，您是想一次性还是连续地这样做，所以我在下面提供了两个使用不同classList的选项。出于这些示例的目的，我每隔3秒（3000毫秒）触发更改，以便您可以看到它的运行情况;只需将下面3000的出现次数更改为300000，持续5分钟。

要仅执行一次序列，请在另一个超时内嵌套超时，删除然后添加.hide类：

＆＃13;

＆＃13;

var div=document.querySelector("div");
setTimeout(function(){
  div.classList.remove("hide");
  setTimeout(function(){
    div.classList.add("hide");
  },3000);// change to 300000 for 5 minutes
},3000);// change to 300000 for 5 minutes

＆＃13;

div{font-family:sans-serif;}
.hide{
  display:none;
}

＆＃13;

<div class="hide">Lorem Ipsum ...</div>

＆＃13;

＆＃13;

＆＃13;

要连续执行序列，请使用间隔切换.hide类。

＆＃13;

＆＃13;

var div=document.querySelector("div");
setInterval(function(){
  div.classList.toggle("hide");
},3000);// change to 300000 for 5 minutes

＆＃13;

div{font-family:sans-serif;}
.hide{
  display:none;
}

＆＃13;

<div class="hide">Lorem ipsum ...</div>

＆＃13;

＆＃13;

＆＃13;