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 img方法轻松定位子.eq()。

HTML :(你根本不需要任何课程:) huray！）

<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。

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

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

3 个答案: