0

我正在尝试制作一个在页面底部包含三个图像的 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 来更改边框颜色。我完全省略了边框颜色，因为我想知道你们认为我应该把它放在哪里。

我尝试了几种不同的方法，但我无法让它发挥作用，非常感谢任何建议。

4

3 回答 3

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)。
现在使用该值，您可以img使用 jQuery.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代表日期部分的数量。

于 2013-06-11T22:37:01.063 回答
0

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

.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');
}
于 2013-06-11T22:14:02.393 回答
0

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

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

有关演示，请参见此处：
http ://shawnfromportland.com/circadianCssWithPhp/

来源在这里查看：
https ://github.com/shawnfromportland/circadianCssWithPhp

于 2018-10-07T19:39:21.497 回答