0

Estamos finalizando um sistema do qual na parte de login tem um background com uma determinada imagem, porém estamos querendo fazer com que a cada dia uma nova imagem apareça, o mesmo que ocorre no Bing. Tem como fazer isso no javascript ou jquery? A mudança de imagem seria diariamente e não a cada acesso.

2
  • 3
    A forma mais eficiente de se fazer é no lado do servidor, então se quiser usar Javascript, sugiro estudar Node.js. Fazer isso com Javascript no lado do cliente é masoquismo puro. 12/09/2017 às 13:53
  • Já viu o site do Composer? Ele faz isso, só que gera a imagem aleatoriamente (0,5, se não me engano) e troca as imagens. 12/09/2017 às 16:26

2 Respostas 2

3

Olá, tem sim, tem como trocar cada background pelo dia da semana:

Código script:

<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>

Cria uma pasta chamada Images e adiciona as imagens com cada nome da semana, pode alterar os nomes para português.

2
  • Obrigado Matheus.
    – user24136
    12/09/2017 às 14:14
  • De nada, qualquer coisa só falar.
    – user81560
    12/09/2017 às 14:14
2

É possível, no seguinte exemplo faço um background para cada dia da semana:

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]+ ')';

No caso do dia de hoje (terça feira) week_day retorna 2, ou seja, a terceira imagem do nosso array images, sendo que domingo é 0, segunda é 1, etc...

DOCS

5
  • Obrigado Miguel.
    – user24136
    12/09/2017 às 14:26
  • Quem quiser implementar essa ideia, sugiro esse site de imagens: pixabay.com/pt
    – user24136
    12/09/2017 às 14:26
  • 1
    Obgado @Fox.11, tenho sempre de andar à procura de imagens cada vez que quero exemplificar alguma coisa com imagens
    – Miguel
    12/09/2017 às 14:29
  • Miguel esse exemplo não é automaticamente, precisa colocar o week_day.
    – user81560
    12/09/2017 às 15:41
  • @MatheusCalixto é o mesmo que o teu, é automático consoante o dia da semana, que no teu caso é imagenumber
    – Miguel
    12/09/2017 às 15:50

Você deve fazer log-in para responder a esta pergunta.