如何根据一天的时间更改div颜色？ [英] How to change the a div colour depending on the time of day?

问题描述

可能重复：

根据时间更改背景（使用javascript）

我想知道，如果没有大幅度降低希望查看网站的用户的访问速度，可以这样做，可以改变背景颜色在整天的褪色，代表

I would like to know, if it is possible to do so without massively slowing down the speed of access for users wishing to view the website, to change the background colour fading throughout the day to represent the colour of the sky.

此外，从X到X的脸部可能在不同的时间发生。为了解释自己多一点，获取日出和日落时间为英格兰和从，让说06:39到18:32它会显示白天的褪色，然后从18:32到新获取的第二天日出它会夜间褪色吗？

Also, would it be possible to have the face from X to X happen at different times. To explain myself a little more, fetch the sunrise and sunset times for England and from, lets say 06:39 to 18:32 it'll show the daytime fade and then from 18:32 to the newly fetched next day sunrise it'll do the nighttime fade?

我不想简单地改变两种颜色，有一天和夜间的颜色，如果你不同意我的要求和你

I would not like to simply change from two colours and have a day and nighttime colour, if you do not agree with what I have asked and you personally believe it is bad or whatnot, maybe have these colours:

• 早上颜色（上午6点至晚上12点）


• 日间颜色（下午12点至下午6点）


• 晚间颜色（下午6点至12点）


• 
  

• Morning Colour (6am-12pm)
• Daytime Colour (12pm-6pm)
• Evening Colour (6pm-12am)
• Twilight Colour (12am-6am)

但我个人更喜欢涉及更多的颜色。

But I would personally much prefer to have more colours involved.

最好的问候，
Tim

Best Regards, Tim

更新：

对我来说，这是相当简单，但是我不知道很多Javascript和whatnot，因此我不知道如何动态，听时间编辑到css或whatnot，而不需要一个页面刷新。此外，我对褪色和学习打开一个套接字来检查日出和日落是否非常感兴趣。

Okay so people are trying to explain to me that this is fairly simple, however I do not know much Javascript and whatnot, therefore I do not know how to do this dynamically, listen to the time to edit to css or whatnot without needing a page refresh. Also, I am very much interested in having a fade and learning to open a socket to check when the sunrise and sunset is.

推荐答案

我建议您使用以下代码创建一个php页面：date.php

I recommend you to use create a php page with this code: date.php

<?php echo date('G') ?>

然后使用jQuery和Color Animation插件创建一个独立的.js。

Then create a seperate .js with jQuery and Color Animation plugin.

$(document).ready(function() {

    setInterval(function() {

        $.get("date.php", function(data){

        If(data>6 && data<12)
        {
        $("#div").animate({backgroundColor: '#FF0000'}, 'slow');
        }
        });
    }, 300);
});

然后在您的页面中包含此js。

Then include this js in your page.

这是正确的做法。

只是一个简单的例子。没有测试，但它应该工作。

Just a simply example. Didn't test it, but it should work.

这篇关于如何根据一天的时间更改div颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！