[英]Show div every 5 minutes javascript
I have a javascript code that is only showing the DIV one time after 5 minutes, but I want that script to execute/show the DIV id "off" again every 5 minutes... 我有一个javascript代码,只在5分钟后显示DIV一次,但我希望该脚本每5分钟再次执行/显示DIV ID“off”...
How can I do that? 我怎样才能做到这一点?
<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>
setInterval()
setInterval()
setInterval(function() {
div.style.display = 'block';
}, 5 * 60000);
If at some point you want to stop your interval ticking, you should use it assigned to a function expression like: 如果在某些时候你想要停止你的间隔滴答,你应该使用它分配给一个函数表达式,如:
var myIntv = setInterval(function() {
div.style.display = 'block';
}, 5 * 60000);
// (let's say we're inside a button click event)
// clearInterval( myIntv ); // Stop it
setTimeout()
setTimeout()
function doSomething (){
div.style.display = 'block';
setTimeout(doSomething, 5 * 60000); // Recall
}
doSomething(); // Start
Please remove "I am inside the Div" from the code and it will work for you as you need : 请从代码中删除“我在Div内”,它将根据您的需要为您服务:
<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>
probably not the most efficient way to approach this but it works. 可能不是最有效的方法,但它的工作原理。 tweak as u see fit.
你认为合适的调整。
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
}
}
}
use setInterval
can do any time you want .Also used ==
to make sure none or block. 使用
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>
If I'm understanding you correctly, you want to show an element after 5 minutes and then hide it again after another 5 minutes (if this is not the case then please edit your question to clarify). 如果我正确理解你,你想在5分钟后显示一个元素,然后在5分钟后再次隐藏它(如果不是这样的话请编辑你的问题以澄清)。
What's not clear is whether you just want to do this once or continuously so I've provided both options below, which use different classList
. 不清楚的是你是想一次还是连续这样做,所以我在下面提供了两个使用不同
classList
选项。 For the purposes of these examples, I have the changes triggering every 3 seconds (3000ms) so you can see it in action; 出于这些示例的目的,我每隔3秒(3000毫秒)触发更改,以便您可以看到它的运行情况; just changes the occurrences of
3000
below to 300000
for 5 minutes. 只需将
3000
以下的出现次数更改为300000
持续5分钟。
To execute the sequence just once, nest a timeout within another timeout, removing and then adding .hide
class: 要仅执行一次序列,请在另一个超时内嵌套超时,删除然后添加
.hide
类:
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
div{font-family:sans-serif;} .hide{ display:none; }
<div class="hide">Lorem Ipsum ...</div>
To execute the sequence continuously, use an interval to toggle the .hide
class. 要连续执行序列,请使用间隔切换
.hide
类。
var div=document.querySelector("div"); setInterval(function(){ div.classList.toggle("hide"); },3000);// change to 300000 for 5 minutes
div{font-family:sans-serif;} .hide{ display:none; }
<div class="hide">Lorem ipsum ...</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.