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

Question

I'm working on a website that contains many elements that change based on the time of day. 我正在一个包含许多根据一天中的时间而变化的元素的网站。 I would like to have an image change based on the time of day, one image for a day period, and one for night, so: 我想根据一天中的时间更改图像，一天中更改一张图像，晚上更改一张图像，所以：

Day image = 8:30–00:00 每日图片= 8：30–00：00

Night image = 00:00–8:30 夜景图片= 00：00–8：30

I came across this example on Stackoverflow, but I'm not sure if this is accurate to my browser time (the image change should be based on my time and not the users). 我在Stackoverflow上遇到了这个示例，但是我不确定这对我的浏览器时间是否准确（图像更改应基于我的时间而不是用户）。

This is the example: 这是示例：

 $( 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">

Any ideas? 有任何想法吗？ Any help would be fantastic. 任何帮助都将是极好的。 Thank you :-) 谢谢：-）

Answer 1

Server side you check time and based on it, you add either night or day to the body (as class or data attribute) 在服务器端检查时间，然后根据该时间在主体上添加夜晚或白天（作为类或数据属性）

Additionally, you can run your script and update it if a user doesn't reload. 此外，如果用户不重新加载，则可以运行脚本并进行更新。

 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

Client Time : 客户时间：

If you are talking about the client time, that's good. 如果您在谈论客户时间，那很好。 But I recommand to change the interval used to 10 min or more. 但我建议将使用的时间间隔更改为10分钟或更长时间。

Server Time: 服务器时间：

But If you are talking about the server time, the response will be no. 但是，如果您正在谈论服务器时间，则响应为否。 You have to pass the time of your server by a backend code like php,java,node... Or , you can use time given api, like this : 您必须通过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>

This work only if you use JSONP. 仅当您使用JSONP时，此功能才有效。 What we do is we request this url that contains the time of your server (in Amsterdam): http://www.timeapi.org/utc/after+one+hour 我们要做的是请求包含您服务器时间的网址（在阿姆斯特丹）： 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