根據一天中的時間更改圖像

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