Question

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

日图= 8：30-00：00

夜间图像= 00：00-8：30

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

这是一个例子：

＆＃13;

$( 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();
    }
}

＆＃13;

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

＆＃13;

有什么想法吗？任何帮助都会很棒。谢谢： - ）

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 个答案: