根据一天中的时间来改变颜色

Change Colors Depending on the Hour of the Day

本文关键字：改变 变颜色 时间 一天      更新时间：2023-09-26

我试图使一个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

相关文章：