我正在开发一个网站，其中包含许多根据一天中的时间而变化的元素。我希望根据一天中的时间更改图像，一张图像代表白天，一张图像代表夜间，因此:
日间图像 = 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>关于javascript - 根据一天中的时间更改图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36210209/