Changing Background Based on Time of Day (Using JavaScript)

Changing background based on time of day (using javascript)

You don't need to use a new stylesheet for each image. You can change only the background image from javascript:

<html>
<head>
    <title></title>
</head>
<body>

</body>
<script type="text/javascript">
var currentTime = new Date().getHours();
if (document.body) {
    if (7 <= currentTime && currentTime < 20) {
        document.body.background = "http://itsnotch.com/tumblr/images/daytime_bg.jpg";
    }
    else {
        document.body.background = "http://itsnotch.com/tumblr/images/nighttime_bg.jpg";
    }
}
</script>
</html>

EDIT: updated to show the recommended location of the script inside the page. This has been tested and works in Firefox and Internet Explorer.

Changing the background-color at different hours of the day in JavaScript?

Here is a simple mock-up.

Depending on what time local-time, it will change the background color and text.

I've also made it so it re-checks every minute,. So if you keep the page open it will change color as the time changes.

With a little bit more effort, you could maybe even make it tween between colors during the day.

I've also removed the document.write, that's bad practise try not to use. In here I've use querySelector on a div to show text.

function updateBackground() {

  var 

    hr = (new Date()).getHours(),

    body = document.body,

    bstyle = body.style,    

    hello = document.querySelector(".hello");    

  if (hr < 10) {

    bstyle.backgroundColor = "yellow";

    bstyle.color = "black";

    hello.innerText = "Have a good morning";

  } else if (hr < 20) {

    bstyle.backgroundColor = "green";

    bstyle.color = "white";

    hello.innerText ="Have a good day!";

  } else {

    bstyle.backgroundColor = "black";

    bstyle.color = "white";

    hello.innerText = "Have a good night!";

  } 

}

setInterval(updateBackground, 1000 * 60);

updateBackground();

.hello {

  font-size: 4em;

}

<div class="hello"></div>

Change Div Background-color based on time of the day

I can't comment on the post so i will just make it as an answer.

Are you putting the <script></script> on the top of the body / head? If so, move it to the bottom of your body / after the <div id="top">. Putting the script on head / top of the body won't work because the <script> is being executed before <div id="top"> is rendered.

Your code works fine for me, try this:

<html>
<head>
    <style>
        #top {
            height: 100vh;
            -webkit-transition: background-color 700ms linear;
            -moz-transition: background-color 700ms linear;
            -ms-transition: background-color 700ms linear;
            -o-transition: background-color 700ms linear;
            transition: background-color 700ms linear;
            background-color: rgba(253, 208, 7, 1);
            justify-content: center;
        }

        #top.scrolled {
            background-color: transparent
        }
    </style>
</head>

<body>
    <section class="full-height section-scroll" id="top">
        <div class="os-animation" data-os-animation="fadeInUp" data-os-animation-delay="0s">
            <section class="intro-top">
                <h1>This is my H1</h1>
            </section>
    </section>

    <script type="text/javascript">
        var now = new Date();
        var hours = now.getHours();
        //Keep in code - Written by Computerhope.com
        //Place this script in your HTML heading section
        document.write('It\'s now: ', hours, '<br><br>');
        document.bgColor = "#CC9900";

        //hours = 4; Just for testing

        //18-19 night
        if (hours > 17 && hours < 20) {
            document.getElementById("top").style.backgroundColor = "orange"
        }
        //20-21 night
        else if (hours > 19 && hours < 22) {
            document.getElementById("top").style.backgroundColor = "red"
        }
        //22-4 night
        else if (hours > 21 || hours < 5) {
            document.getElementById("top").style.backgroundColor = "#C0C0C0";
        }
        //9-17 day
        else if (hours > 8 && hours < 18) {
            document.getElementById("top").style.backgroundColor = "#616D7E";
        }
        //7-8 day
        else if (hours > 6 && hours < 9) {
            document.getElementById("top").style.backgroundColor = "skyblue";
        }
        //5-6 day
        else if (hours > 4 && hours < 7) {
            document.getElementById("top").style.backgroundColor = "steelblue";
        } else {
            document.getElementById("top").style.backgroundColor = "white";
        }
    </script>
</body>

</html>

Changing section background based on time

You are close, but if you want to target only changing the background on your section, then you need to change the CSS selectors slightly. While you CAN have both a 'day' and 'night' class, it is easier to just have a default, and then an overridden 'night' theme.

Since you are already using $(document).ready, I'll assume you have jQuery included, so I've modified your function to take advantage of this and preserving whatever additional classes may have already been present on the body.

$(document).ready(function() {

  $('body').toggleClass('night',IsNight());

  setInterval(function(){

    $('body').toggleClass('night',IsNight());

  },60000);

});

function IsNight()

{

  var d = new Date();

  var n = d.getHours();

  return (n >= 18 || n < 6);

}

#home-section {

  background-image: url("./css/images/daymode.jpg");

  background-size: cover;

}

.night #home-section {

  background-image: url("./css/images/nightmode.jpg");

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section class="home-section section-hero overlay slanted" id="home-section">blah</section>

Changing background image based on local time

Your logic is perfect and works as intended (I changed the images to colours, because StackOverflow gave an error when I tried your snippet).

The only problem (to you a problem, to others a design feature) is that setInterval starts after the first interval is complete. In other words; you had to wait an hour to see the results.

In my fix I moved the JavaScript to a separate function, which is mentioned by the setInterval and after that immediately called.

I also removed the double classes on the body, because that will be set by the function.

Edit: I forgot to mention that a double class (day and night) can occur with this code. You should write some logic to remove day when night is applied and vice versa.

Edit2: I changed the equation for the time a bit. n can't be bigger than 23, but it can be 23. Also, you wanted to change it to day around 7, which includes 6. So your equation should be right.

As user Salman A states, you should decrease the interval. If a user starts browsing your site at 6:58 and stayed one a single page for an hour (I don't know the business of your website, but that's quite long), the background would change around 7:58. So decrease your interval to something like 1 or 2 minutes (1000 * 60 * 1 or 1000 * 60 * 2).

<html>

<head>

  <style>

    .day {

      background-color: #ccc;

    }

    

    .night {

      background-color: #333;

    }

  </style>

</head>

<body>

  <script>

    setInterval(change_background, 1000 * 60 * 60);

    function change_background() {

      var d = new Date();

      var n = d.getHours();

      console.log(n);

      if (n == 23 || n < 7) {

        document.body.className = "night";

      } else {

        document.body.className = "day";

      }

      console.log("test");

    }

    change_background();

  </script>

</body>

</html>

Changing Background Based on Time of Day (Using JavaScript)