可见内容会按设置的时间间隔更改-但之前的内容随后会闪烁显示

时间:2019-04-04 18:38:28

标签: javascript jquery css

我正在构建一个网络托管菜单的示例,该菜单将分解为多个内容块。某些内容将在一天的指定时间更改(早餐至午餐菜单)。内容在适当的时间更改,但是几秒钟后,在停止之前的1-2分钟内,以前的内容会以闪烁的方式重新出现几次。

$( document ).ready(function() {  
    SetImage();
    window.setInterval(SetImage,1000);
});

function SetImage(){     
    var nowdate = new Date() ;
    
    var waketime = new Date();     
    waketime.setHours(6);
    waketime.setMinutes(30);
    
    var bedtime = new Date();     
    bedtime.setHours(12);
    bedtime.setMinutes(00);
    
    if(waketime < nowdate  && nowdate < bedtime){
         $('.day').show();
         $('.night').hide();
    }else{
         $('.night').show();
         $('.day').hide();
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col content">
	<img class="day" src="images/img05.jpg"/>
	<img class="night" src="images/img07.jpg"/>
</div>
<div class="col sidebar">
	<img class="day" src="images/img06.jpg"/>
	<img class="night" src="images/img08.jpg"/>
</div>

http://damianzannini.com/HTH/index5.html

如前所述,我能够在适当的时间更改内容,但是几秒钟后(通常是闪烁的),以前可见的(现在应该隐藏的)内容仍会重新出现。我的目标是拥有它,以便一旦更改内容,就不会闪烁,并且直到下一个指定时间都不会更改内容。

1 个答案:

答案 0 :(得分:0)

在您的网站上,您将脚本放到了正文之外,这是一个问题。

我会尝试添加此CSS,以便在页面加载时都立即被隐藏,因为jquery不会在CSS加载之前运行。

.day, .night{display:none;}