Change the website background daily automatically

Asked

Viewed 278 times

0

We are finalizing a system where the login part has a background with a certain image, but we want to make a new image appear every day, the same as in Bing. Can you do this in javascript or jquery? The image change would be daily and not every access.

javascript jquery
  • 3

    The most efficient way to do it is on the server side, so if you want to use Javascript, I suggest studying Node.js. Doing this with Javascript on the client side is pure masochism.

  • Have you seen the website Composer? He does this, only he randomly generates the image (0.5, if I’m not mistaken) and exchanges the images.

2 answers

3


Hello, yes, there is a way to exchange each background for the day of the week:

Scripting code:

<script type="text/javascript"><!--
    var imlocation = "Images/";
    function ImageArray (n) {
        this.length = n;
        for (var i =1; i <= n; i++) {
            this[i] = ' '
        }
    }
    image = new ImageArray(7);
    image[0] = 'sunday.PNG';
    image[1] = 'monday.PNG';
    image[2] = 'tuesday.PNG';
    image[3] = 'wednesday.PNG';
    image[4] = 'thursday.PNG';
    image[5] = 'friday.PNG';
    image[6] = 'saturday.PNG';
    var currentdate = new Date();
    var imagenumber = currentdate.getDay();
    document.write('<img src="' + imlocation + image[imagenumber] + '">');
</script>

Creates a folder called Images and add the images with each name of the week, you can change the names to Portuguese.

  • Thank you Matheus.

  • You’re welcome, anything just talk.

2

It is possible, in the following example I do a background for each day of the week:

var images = [
  'https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg',
  'https://upload.wikimedia.org/wikipedia/commons/1/1e/Stonehenge.jpg',
  'https://upload.wikimedia.org/wikipedia/commons/2/2a/Junonia_lemonias_DSF_upper_by_Kadavoor.JPG',
  'https://c1.staticflickr.com/6/5216/30091409642_42af7bf19f_b.jpg',
  'https://c2.staticflickr.com/6/5612/31035985960_096daebcb7_b.jpg',
  'http://www.kendirfuar.com/img/sabitler/eskiler/8-0b1555db83aa481e518543aac4af0ddf.jpg',
  'https://i.stack.imgur.com/XeIwO.png'
];

var week_day = new Date().getDay();
document.body.style.backgroundImage = 'url(' +images[week_day]+ ')';

In the case of today (Tuesday) week_day returns 2, i.e., the third image of our array images, whereas Sunday is 0, second is 1, etc....

DOCS

  • Thank you Miguel.

  • If you want to implement this idea, I suggest this image site: https://pixabay.com/pt

  • 1

    Obgado @Fox.11, I always have to look for images every time I want to exemplify something with images

  • Miguel this example is not automatically, you need to put week_day.

  • @Matheuscalixto is the same as yours, is automatic according to the day of the week, which in your case is imagenumber

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.