根据一天中的小时更改颜色

Question

我正在尝试制作一个HTML文档，该文档在页面底部具有三个图像。 所有这些图像上都有边框。 在一天中的某个时候，图像上的颜色边框会有所不同，因此第一个图像将从绿色开始，另外两个图像变为红色，然后中间的图像变为绿色，外部的两个图像变为红色。

我在获取任何代码来更改边框颜色时遇到很多麻烦，更不用说让它们与条件语句一起使用了。

这就是我的index.html部分看起来像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更改边框颜色。 我完全省略了边框颜色，因为我想知道你们认为我应该在哪里放置它。

我尝试了几种不同的方法，但我无法使其正常工作，因此请多多指教。

Answer 1

就这么简单： 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数量的NofImages 。

Answer 2

我建议为突出显示的颜色创建一个类：

.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');
}

Answer 3

虽然您的问题中的特定问题已由投票最多的评论回答，但可以根据天的小时数或什至根据实际的日光实时扩展答案以更改或动画化您选择的CSS属性。在地球上您的特定位置。

这是我用少量的php编写的演示和源代码，用于根据给定位置的日光更改css属性

演示请看这里：
http://shawnfromportland.com/circadianCssWithPhp/

对于源，请在这里查看：
https://github.com/shawnfromportland/circadianCssWithPhp