使用Javascript在一天中的特定时段显示和隐藏div（刷新）

我有4个不同的容器（div）。每个都有一个与一天中特定时间段相关的内容这不是将重新加载的网页。我已经成功地按照正确的时间隐藏和显示了这些divs。但是，这只发生在页面加载时

此页面将在没有键盘和鼠标的计算机上全天在屏幕上打开

我讨厌每30分钟就有一个页面让这种事情发生

有人能解决这个问题吗？谢谢你的帮助

（不知道为什么代码在这里不起作用。我的测试页面上已经有了它……对不起）

var myMenu1=document.getElementById（'rt-showcase3'）；
var myMenu2=document.getElementById（'rt-showcase3a'）；
var myMenu3=document.getElementById（'rt-showcase3b'）；
var myMenu4=document.getElementById（'rt-showcase3c'）；
var myMenu5=document.getElementById（'rt-showcase3d'）；
myMenu2.hide（）；
myMenu3.hide（）；
myMenu4.hide（）；
myMenu5.hide（）；
var d=新日期（）；
如果（d.getHours（）>=6&&d.getHours（）=10&&d.getHours（）=14&&d.getHours（）您可以每5秒运行一次检查

window.setInterval(function(){
  /// hide and show divs
}, 5000);

所以你可以在那里调用你的函数。
更新：起初，我把这个问题误解为div没有隐藏和显示。
更新了JS fiddle链接

var myMenu1 = document.getElementById('rt-showcase3');
var myMenu2 = document.getElementById('rt-showcase3a');
var myMenu3 = document.getElementById('rt-showcase3b');
var myMenu4 = document.getElementById('rt-showcase3c');
var myMenu5 = document.getElementById('rt-showcase3d');

myMenu2.style.display = 'none';
myMenu3.style.display = 'none';
myMenu4.style.display = 'none';
myMenu5.style.display = 'none';

(function update(){
var d = new Date();
if (d.getHours() >= 6 && d.getHours() <= 10) {
  myMenu1.style.display = 'none';
  myMenu2.style.display = 'block';
} else if (d.getHours() >= 10 && d.getHours() <= 14) {
  myMenu1.style.display = 'none';
  myMenu2.style.display = 'none';
  myMenu3.style.display = 'block';
} else if (d.getHours() >= 14 && d.getHours() <= 23) {
  myMenu1.style.display = 'none';
  myMenu2.style.display = 'none';
  myMenu3.style.display = 'none';
  myMenu4.style.display = 'block';

} else {
  myMenu1.style.display = 'block';
  myMenu2.style.display = 'none';
  myMenu3.style.display = 'none';
  myMenu4.style.display = 'none';
}
})();
var updateTimeout = 60 * 1000;//1 minute
setInterval(update,updateTimeout);

var myMenu1=document.getElementById（'rt-showcase3'）；
var myMenu2=document.getElementById（'rt-showcase3a'）；
var myMenu3=document.getElementById（'rt-showcase3b'）；
var myMenu4=document.getElementById（'rt-showcase3c'）；
var myMenu5=document.getElementById（'rt-showcase3d'）；
myMenu2.style.display='none'；
myMenu3.style.display='none'；
myMenu4.style.display='none'；
myMenu5.style.display='none'；
（函数更新（）{
var d=新日期（）；
如果（d.getHours（）>=6&&d.getHours（）=10&&d.getHours（）=14&&d.getHours（）仅在刷新时发生，因为函数仅在页面加载时执行。您可以使用setInterval（）解决此问题

其中interval time是以毫秒为单位的时间
这将每60分钟重新加载一次页面，并将第一次执行四舍五入，因此如果您在08:37打开页面，它将在09:00重新加载第一次

如果需要，可以将其调整为30分钟。如果不想重新加载页面，则需要将div内容移动到外部文件，并使用ajax加载它们

setTimeout(function(){
    setTimeout( function(){
        location.reload();
    },10000)
},3600000 - ((new Date) % 3600000));

诀窍在于函数的最后一部分，它将计算第一个小时的时间差。
我在我的一个项目中遇到了同样的问题。我设法使页面具有空div，并使用jquery load（）和setTimeout（）每隔30分钟运行一次ajax调用在不刷新页面的情况下加载内容。OP指的是30分钟的间隔，而不是5秒。他也有一个问题，他不想刷新页面，但这是代码现在所做的。这不会刷新页面。这实际上没有任何作用：既不刷新，也不做任何其他事情……你能详细说明你的想法吗？在函数t中hey可以放置他们的代码来隐藏和显示div。非常感谢大家的帮助和及时的回复。只是澄清一下，我不介意每15分钟甚至每5分钟检查一次间隔。但我不想定期刷新整个页面。我页面上还有其他内容需要保持不刷新。不是吗想象一下，这就像一个18小时的视频，如果页面刷新，它可能会被重新播放…所以，我只想让这些div在每个时段交换…我现在使用的是用户3785351发布的最后一个代码，我会测试它。我会让你知道它是否有效。这与OP的问题有什么不同？myMenu2.hide（）和myMenu2.show（）不是任何函数。请使用myMenu1.style.display='none'和myMenu2.style.display='block'。他包括定义show（）和hide（）的jquery作为函数。他的代码是正确的。它们都是函数，OP已声明在页面加载时代码工作正常！OP的发言时间约为30分钟而不是1分钟。您没有解释OP应该如何处理此代码。请详细说明您的答案。
setTimeout(function(){
    setTimeout( function(){
        location.reload();
    },10000)
},3600000 - ((new Date) % 3600000));