我试图使一个html文档有三个图像在页面的底部。所有这些图像都有边框。在一天中的某个时刻,图像将具有不同的颜色边框,因此第一个图像将以绿色开始,其他两个将以红色开始,然后中间将以绿色开始,最外面的两个将以红色开始。
我有很多麻烦得到任何代码来改变这些边界颜色,更不用说让他们与条件语句一起工作了。
这是我的index.html
section的样子src是图像
<div id="shippingLogos">
<img src="images/FedExground.jpg" alt="FedEx Ground" class="shipGround"/>
<img src="images/UPS.jpg" alt="UPS" class="shipUPS" />
<img src="images/FedEx_Express.png" alt="FedEx Express" class="shipExpress" />
</div>
类然后转到我的style.css
文件,在那里使用相应的类名
img.shipGround
{
border-style: solid;
border-width: 10px;
float: left;
height:300px;
margin: 30px 38px 30px 38px;
width:25%;
}
我已经有了边框,我所要做的就是使用jscript/jquery来改变边框颜色。我完全省略了边框颜色,因为我想知道你们认为我应该把它放在哪里。
我已经尝试了几种不同的方法,但我不能让它工作,任何建议都是非常感谢的。
就是这么简单:http://jsbin.com/uqeyeg/3/edit
var idx = Math.floor( (new Date().getHours()/24) * 3 );
$("#shippingLogos img").eq( idx ).addClass('green');
idx
将根据一天中的小时返回0, 1, 2
(24h/8h=3parts)。
现在使用该值,您可以使用jQuery .eq()
方法轻松地瞄准img
子节点。
HTML:(你根本不需要任何类:)万岁!)
<div id="shippingLogos">
<img src="images/FedExground.jpg" alt="FedEx Ground" />
<img src="images/UPS.jpg" alt="UPS" />
<img src="images/FedEx_Express.png" alt="FedEx Express" />
</div>
CSS :
#shippingLogos img {
border: 10px solid red; /* MAKE RED DEFAULT */
float: left;
height:300px;
margin: 30px 3%;
width:24%;
}
.green{
border: 10px solid green !important; /* APPLIED BY jQuery */
}
编辑:由DavidThomas建议-值得一提
如果你需要使代码更灵活,例如:你有6张图片,你想把你的天分成6个,你可以这样做:
var $images = $("#shippingLogos img"),
NofImages = $images.length,
idx = Math.floor( (new Date().getHours()/24) * NofImages );
$images.eq( idx ).addClass('green');
结论:
正如您所看到的,我们只是替换了旧的 3
,并使用NofImages
来表示天数。
我建议为突出显示的颜色创建一个类:
.highlight {
border-color: red;
}
然后,使用Javascript设置该类(假设您使用jQuery):
var date = new Date();
var hours = date.getHours();
$("#shippingLogos").children().removeClass('highlight');
if(hours >= 0 && hours < 8){
$("#shippingLogos").children().eq(0).addClass('highlight');
}else if(hours >=8 && hours < 16){
$("#shippingLogos").children().eq(1).addClass('highlight');
} else {
$("#shippingLogos").children().eq(2).addClass('highlight');
}
虽然你的问题中的具体问题已经被投票最多的评论回答了,但答案可以扩展到根据一天的小时数,甚至根据你在地球上特定位置的实际白昼,实时更改或动画 css属性。
这是我用少量php编写的演示和源代码,用于根据给定位置的日光更改css属性
http://shawnfromportland.com/circadianCssWithPhp/
查看源代码:
https://github.com/shawnfromportland/circadianCssWithPhp