如何根据一天中的小时来替换图像
How to replace image based on the hour of the day
我有一个代码,可以根据一天中的时间(小时)更改背景颜色。现在我正试图做同样的替换图像源,但似乎不工作,代码也是基于计算机时区,但我想使其仅基于巴塞罗那市,西班牙。
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" />
有什么建议可以更好地理解它并使其工作吗?提前感谢! 将。attr改为。prop:
$("img#photo1").prop("src","images/head6.png");
另一个选择是在css类中定义背景图像,然后切换类。
这是一个非常有创意的想法,可以根据时间来改变背景。但是您是否将所有src
属性设置为相同的图片?
相关文章:
- 无法从 jQuery RSS Feed 中的 localStorage 动态替换类
- 内部分区字体大小获胜'调整浏览器窗口大小时不会随媒体查询而更改
- 我如何找到一个句子中的所有空格并替换忽略它们
- 调整窗口大小时,可拖动的对象会出现在容器外部
- 如何用更合适的内容替换document.write
- 是否有任何方法可以使用jQuery替换在数组中定义值的文本
- 用每小时的差值填充数组/列表-从下拉列表中给定两个时间值
- 在DOM中查找一个模式并替换它's的内容使用jquery
- 用空格替换下划线PHP
- str.split(someString).join(someOtherString)是否等效于替换
- 使用javascript的图像替换循环
- 如何在iOS应用程序中从Firebase中删除超过6小时的数据
- window.location替换并传递URL历史记录条目中的变量
- 替换标记中的属性
- 指令的模板必须只有一个根元素:With restrict E&替换true
- AngularJs对ng消息的自定义替换
- 用超链接替换URLS
- 用cdata标记替换脚本标记
- IE在将字符串转换为日期时从日期中删除4小时
- 如何根据一天中的小时来替换图像