Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Unhappy Change background colour depending on time of day.

    I'm trying to use javascript to have my webpage black at night and bright blue (#2A7FFF) in the day time. How would I go about this? :/

    I have also tried to use javascript to change a picture depending on the time of day, this is what I have used.

    IN THE <head>

    Code:
    <script type="text/javascript">
    var hourofday = thedate.getUTCHours();
    function sun()
    {
       // return TRUE if it's day
    
       if (hourofday > 7 && hourofday < 10) {
         return true;
       }
       return false;
    }
    </script><script type="text/javascript">
    var hourofday = thedate.getUTCHours();
    function sun()
    {
       // return TRUE if it's day
       if (hourofday > 7 && hourofday < 10) {
         return true;
       }
       return false;
    }
    </script>
    IN THE <body>

    Code:
    <div id="layer1" style="position:absolute; top:5px; left:5px; width:190px; height:190px; z-index:1; padding:5px; border:#000000 2px solid;background:color:#000000;">
    <script type="text/javascript">
    if (sun()) {
      document.write("<img src="www.oliverbinns.webs.com/images/sun.png" />");
    } else {
      document.write("<img src="www.oliverbinns.webs.com/images/moon.png" />");
    }
    </script>
    </div>

  • #2
    Regular Coder Krupski's Avatar
    Join Date
    Dec 2010
    Location
    United States of America
    Posts
    505
    Thanks
    39
    Thanked 47 Times in 46 Posts
    Quote Originally Posted by paperpanda438 View Post
    I'm trying to use javascript to have my webpage black at night and bright blue (#2A7FFF) in the day time. How would I go about this? :/
    What you need is THIS:
    Code:
        document.body.style.background = 'url(./images/sun.png)'; /* image */
    or.....
    Code:
        document.body.style.background = '#0000ff'; /* blue */
    You can put any CSS style in this way... for example:
    Code:
        document.body.style.fontFamily = 'tahoma,verdana';
    Code:
        document.body.style.fontSize = '1.17em';
    Notice that, unlike CSS, "font-size" is "fontSize". Stuff with a dash is "camel-cased". Without a dash it's lowercase. For example:

    "max-width" = "maxWidth"
    "color" = "color"
    "background-color" = "backgroundColor"

    Hope this helps....

    -- Roger

  • Users who have thanked Krupski for this post:

    paperpanda438 (12-22-2010)

  • #3
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the help with the background, but the picture I was talking about was a separate problem, I'm trying make a different one appear on the page depending on the time of day, not be the background image.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,919
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    if (hourofday > 7 && hourofday < 10) {
    will return true only if the hour is 8 or 9. Surely you mean if (hourofday > 7 && hourofday < 20)


    <script type="text/javascript">
    var theDate = new Date();
    var hourofday = theDate.getUTCHours();

    function sun() { // return TRUE if it's day
    if (hourofday > 7 && hourofday < 20) {
    return true;
    }
    else{return false};
    }

    alert (sun());

    </script>

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Last edited by Philip M; 12-22-2010 at 06:39 PM.

  • #5
    Regular Coder Krupski's Avatar
    Join Date
    Dec 2010
    Location
    United States of America
    Posts
    505
    Thanks
    39
    Thanked 47 Times in 46 Posts
    Quote Originally Posted by paperpanda438 View Post
    Thanks for the help with the background, but the picture I was talking about was a separate problem, I'm trying make a different one appear on the page depending on the time of day, not be the background image.
    Well, that Javascript will change the background to an image or to a color depending on what you send it.

    You can call it repeatedly... you could have a loop (using setTimeout or setInterval) that checks the time say once each hour and then calls the background style code with the appropriate color or image when your specified times are hit.

    If you want to change elements (like an <img> tag somewhere in the document) at a specific time, this can also be done.

    Make sense? If not, I'll be happy to explain it further.

    -- Roger


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •