根据一天中的时间更改图像

Change an image based on the time of day

本文关键字：图像 时间 一天      更新时间：2023-09-26

我正在开发一个网站，该网站包含许多随时间变化的元素。我想根据一天中的时间更改图像，一张图像用于白天，一张用于晚上，所以：

日图像=8:30–00:00

夜间图像=00:00–8:30

我在Stackoverflow上看到了这个例子，但我不确定这是否准确到我的浏览器时间（图像更改应该基于我的时间，而不是用户）。

这是一个例子：

$( 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(18);
    bedtime.setMinutes(30);
    
    if(waketime < nowdate  && nowdate < bedtime){
         $('#day').show();
         $('#night').hide();
    }else{
         $('#night').show();
         $('#day').hide();
    }
}
<img id="night" src="http://1.bp.blogspot.com/_7-b4ZWNPaD8/TThuPK0cvUI/AAAAAAAAAAQ/jCqRshKkJd4/s1600/night-scene.jpg">
<img id="day" src="http://media1.santabanta.com/full1/Events/Independence%20Day/independence-day-67a.jpg">

有什么想法吗？任何帮助都将是美妙的。谢谢：-）

在服务器端检查时间，并根据时间将夜间或白天添加到主体（作为类或数据属性）

此外，如果用户没有重新加载，您可以运行脚本并对其进行更新。

window.setInterval(SetImage,5000);   /* set this to at least 10 min */
function SetImage(){     
    var nowdate = new Date();    
    var waketime = new Date();     
    waketime.setHours(6);
    waketime.setMinutes(30);
    
    var bedtime = new Date();     
    bedtime.setHours(18);
    bedtime.setMinutes(30);
    
    if(waketime < nowdate  && nowdate < bedtime) {
         document.body.setAttribute('data-daytime','');
    }else{
         document.body.setAttribute('data-nighttime','');
    }
}
.toggletime {
  padding: 10px;
  background: #eee;
  color: #333;
}
body[data-nighttime] .toggletime {
  padding: 10px;
  background: #333;
  color: #eee;
}
<body data-daytime>
  <div class="toggletime">
    Hey there
  </div>
</body>

客户端时间：

如果你谈论的是客户时间，那很好。但我建议将使用的间隔时间改为10分钟或更长时间。

服务器时间：

但是，如果你谈论的是服务器时间，响应将是否定的。你必须通过php、java、node等后端代码来打发服务器的时间或者，您可以使用给定时间的api，如下所示：

 <script type="text/javascript">
  function myCallback(json) {
    alert(new Date(json.dateString));
  }
</script>
<script type="text/javascript" src="http://timeapi.org/utc/after+one+hour.json?callback=myCallback"></script>

只有当您使用JSONP时，这才有效。我们所做的是请求这个url，其中包含您的服务器（在阿姆斯特丹）的时间：http://www.timeapi.org/utc/after+一小时以上

相关文章：