时间戳

首页 > 解决方案 > 可查看的内容会在设定的时间间隔内发生变化 - 但之前的内容会在之后闪现

javascript - 可查看的内容会在设定的时间间隔内发生变化 - 但之前的内容会在之后闪现

问题描述

我正在构建一个 Web 托管菜单的示例，该菜单将被分解为多个内容块。某些内容会在一天中的特定时间发生变化（早餐到午餐菜单）。内容会在适当的时间发生变化，但几秒钟后，先前的内容会在 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

如前所述，我能够在适当的时间更改内容，但之前可见的（现在应该隐藏的）内容会在几秒钟后继续重新出现（通常是闪烁）。我的目标是让它一旦内容发生变化，就不会发生这种闪烁，并且内容在下一个指定时间之前不会发生变化。

标签： javascriptjquerycss

解决方案

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

我会尝试添加这个 css，这样当页面加载时，两者都会立即隐藏，因为 jquery 不会在 CSS 之前加载和运行。

.day, .night{display:none;}

推荐阅读