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

Question

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

每日图片= 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">

有任何想法吗？ 任何帮助都将是极好的。 谢谢：-）

Answer 1

在服务器端检查时间，然后根据该时间在主体上添加夜晚或白天（作为类或数据属性）

此外，如果用户不重新加载，则可以运行脚本并进行更新。

 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>

Answer 2

客户时间：

如果您在谈论客户时间，那很好。 但我建议将使用的时间间隔更改为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时，此功能才有效。 我们要做的是请求包含您服务器时间的网址（在阿姆斯特丹）： http : //www.timeapi.org/utc/after+one+hour

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

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-03-24 21:38:55

解决方案2
0 2016-03-24 21:37:06

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-03-24 21:38:55

解决方案2 0 2016-03-24 21:37:06

解决方案1
1 已采纳 2016-03-24 21:38:55

解决方案2
0 2016-03-24 21:37:06