Updating background image according to the time in a specific location

Question

Updating background image according to the time in a specific location

I've been struggling with this issue for more than 4 hours now. None of the solutions provided on Stack Overflow seem to work for me. Here's the code snippet I've been working on:

<html>
<head>
  <style>
    .day {
      background-image: url(test2.png);
    }
    
    .night {
      background-image: url(test.png);
    }
  </style>
</head>
<body class="day" class="night">
  <script>
    setInterval(function() {
      var d = new Date();
      var n = d.getHours();
      if (n > 23 || n < 6) {
        document.body.className = "night";
      } else {
        document.body.className = "day";
      }
      console.log("test");
    }, 1000 * 60 * 60);
  </script>
</body>
</html>

My goal is to have the night background displayed from 11 PM to 7 AM, and the day background shown at other times.

I'm using placeholder images as the actual pictures contain mild graphic content. Please feel free to replace them with your own test images.

javascript html css

Answer 1

Answer №1

Your approach is spot-on and functions as expected (I replaced the images with colors due to an error on StackOverflow with your snippet).

The only downside (which may be a problem for you but a design feature for others) is that setInterval begins after the first interval is finished. In simpler terms, you had to wait for an hour to see the changes.

In my solution, I separated the JavaScript into a distinct function called by setInterval, which then triggers immediately.

I also eliminated the duplicate classes on the body since those will be set by the function itself.

Note: There might be an issue of having both day and night classes simultaneously. You should consider implementing logic to remove day when night is applied and vice versa.

Additionally, I tweaked the time equation slightly. The value of n cannot exceed 23, but it can be equal to 23. Also, as per your requirement for switching to day around 7, inclusive of 6, your equation seems correct.

As suggested by user Salman A, it's advisable to decrease the interval duration. For instance, if a user lands on your site at 6:58 and stays on a single page for an hour (assuming it's a lengthy visit), the background would change around 7:58. Hence, consider reducing the interval to perhaps 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>

Answer 2

Your approach is spot-on and functions as expected (I replaced the images with colors due to an error on StackOverflow with your snippet).

The only downside (which may be a problem for you but a design feature for others) is that setInterval begins after the first interval is finished. In simpler terms, you had to wait for an hour to see the changes.

In my solution, I separated the JavaScript into a distinct function called by setInterval, which then triggers immediately.

I also eliminated the duplicate classes on the body since those will be set by the function itself.

Note: There might be an issue of having both day and night classes simultaneously. You should consider implementing logic to remove day when night is applied and vice versa.

Additionally, I tweaked the time equation slightly. The value of n cannot exceed 23, but it can be equal to 23. Also, as per your requirement for switching to day around 7, inclusive of 6, your equation seems correct.

As suggested by user Salman A, it's advisable to decrease the interval duration. For instance, if a user lands on your site at 6:58 and stays on a single page for an hour (assuming it's a lengthy visit), the background would change around 7:58. Hence, consider reducing the interval to perhaps 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>

Updating background image according to the time in a specific location

Answer №1

Similar questions

Can images be placed on the border?

Is background image alignment responsive?

Exceeding the boundaries: Bootstrap 4 Tooltip escaping the div

Animating Brightness and Contrast in CSS

The CSS animation in Firefox is limited to running only once

Automatically adjust padding in nested lists with ReactJS and MaterialUI v1

What is the most effective approach for managing two distinct ajax calls within a Laravel application?

What is the best way to transform a JavaScript object into a JavaScript literal?

What is the technique for transmitting a child element in VueJS?

How can you modify the data within a Vue.js model using the model's method?

The module "ng-particles" does not have a Container component available for export

Changing an element's color dynamically does not affect the color of the bullet point

monitoring the winstonjs logs and inserting additional parameters

JavaScript - Utilizing an image file in relation to a URL pathway

Tips for displaying axios status on a designated button using a spinner

Tips for making a screen adapt to different monitor resolutions

Conceal the horizontal scrollbar when the navigation menu is minimized

spacing between image tiles as you zoom in

Utilize JavaScript to assign an identifier to an element created with createElement()

"Text data will be automatically cut at the end of a page and continue