如何根据一天中的时间替换图像答案

【问题标题】：How to replace image based on the hour of the day如何根据一天中的时间替换图像
【发布时间】：2015-07-28 07:33:42
【问题描述】：

我有一个代码可以根据一天中的时间（每小时）更改背景颜色。现在我正在尝试替换图像源，但似乎无法正常工作，代码也基于计算机时区，但我想仅基于西班牙巴塞罗那市。

JAVASCRIPT

$(document).ready(function(){
var d = new Date();
var n = d.getHours();

//1-2am
if (n > 23 || n < 2) {
 $("img#photo1").attr("src","images/head6.png");
 $('body').css({'background-color':'#2e3348','color':'#FFF'});
 }

//2-3am
else if (n > 24 || n < 3) {
 $("img#photo1").attr("src","images/head6.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//3-4am
else if (n > 1 || n < 4) {
 $("img#photo1").attr("src","images/head6.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//4-5am
else if (n > 2 || n < 5) {
 $("img#photo1").attr("src","images/head6.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//5-6am
else if (n > 3 || n < 6) {
 $("img#photo1").attr("src","images/head6.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//6-7am
else if (n > 4 || n < 7) {
 $("img#photo1").attr("src","images/head6.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//7-8am
else if (n > 5 || n < 8) {
 $("img#photo1").attr("src","images/head6.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//8-9am
else if (n > 6 || n < 9) {
 $("img#photo1").attr("src","images/head4.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//9-10am
else if (n > 7 || n < 10) {
 $("img#photo1").attr("src","images/head4.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//10-11am
else if (n > 8 || n < 11) {
 $("img#photo1").attr("src","images/head4.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//11-12am
else if (n > 9 || n < 12) {
 $("img#photo1").attr("src","images/head4.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//12-1pm
else if (n > 10 || n < 13) {
 $("img#photo1").attr("src","images/head4.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//1-2pm
else if (n > 11 || n < 14) {
 $("img#photo1").attr("src","images/head4.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//2-3pm
else if (n > 12 || n < 15) {
 $("img#photo1").attr("src","images/head4.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//3-4pm
else if (n > 13 || n < 16) {
 $("img#photo1").attr("src","images/head4.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//4-5pm
else if (n > 14 || n < 17) {
 $("img#photo1").attr("src","images/head4.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//5-6pm
else if (n > 15 || n < 18) {
 $("img#photo1").attr("src","images/head4.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//6-7pm 
else if (n > 16 || n < 19) {
 $("img#photo1").attr("src","images/head.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//7-8pm 
else if (n > 17 || n < 20) {
 $("img#photo1").attr("src","images/head1.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//8-9pm 
else if (n > 18 || n < 21) {
 $("img#photo1").attr("src","images/head1.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//9-10pm 
else if (n > 19 || n < 22) {
 $("img#photo1").attr("src","images/head1.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//10-11pm 
else if (n > 20 || n < 23) {
 $("img#photo1").attr("src","images/head1.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//11-12pm 
else {
 $("img#photo1").attr("src","images/head1.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }
});

我的 HTML 是

<img src="" id="photo1" />

有什么建议可以更好地理解它并使其发挥作用吗？提前致谢！

【问题讨论】：

代码对我来说似乎有效......也许缓存有问题？
更改 img src 的行应该可以工作，您是否遇到错误？检查您的网络标签，可能是您的图像返回 404
获取用户的时区：var now = new Date(); var offset = now.getTimezoneOffset()，减去当前时间，加上barcelona的偏移量：var barcelona = new Date(now + (offset + 2*60)*60*1000)至于变化的图像，见其他cmets。这可能有助于您调试：developer.mozilla.org/en/docs/Debugging_JavaScript
@lordvlad 非常感谢您，但我想要的是获取用户的时区，我想强制代码仅获取西班牙巴塞罗那市的时区。实际时间是上午 10:24，所以如果用户在澳大利亚，他们现在的时间应该是下午 4 点或 5 点，但我想强迫他们现在看到基于巴塞罗那时间的设计，有什么资源吗？
是的，这就是代码的作用。再看看它。获取用户的时间，获取用户的偏移量，使用用户的偏移量和巴塞罗那的偏移量之间的差计算巴塞罗那时间。当然，这需要用户的时间有点准确。如果你不能依赖你需要查询另一个服务器的时间：stackoverflow.com/questions/9486293/…

标签： javascript jquery html css

【解决方案1】：

将 .attr 更改为 .prop：

 $("img#photo1").prop("src","images/head6.png");

另一种选择是在 css 类中定义背景图像，然后切换类。

【讨论】：

这个答案解释了原因：stackoverflow.com/questions/5874652/prop-vs-attr
好的，现在我看到文件夹上没有 head6.png 图像，这就是它没有显示正确图像的原因。但是，@Ori Drori 一直是个问题，它没有根据代码显示正确的背景，例如，这里是上午 10:26，代码向我显示了 //3-4am 的背景if (n > 1 || n

【解决方案2】：

根据时间改变背景是非常有创意的想法。但是你是把所有src属性都设置为同一张图片吗？

【讨论】：

对不起，我没有用不同的图像替换图像，我还在解决一些问题，然后我会继续每小时替换图像，非常感谢