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.
-
3A 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.– Oralista de Sistemas12/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.– UzumakiArtanis12/09/2017 às 16:26
2 Respostas
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.
-
Obrigado Matheus.– user2413612/09/2017 às 14:14
-
De nada, qualquer coisa só falar.– user8156012/09/2017 às 14:14
É 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...
-
Obrigado Miguel.– user2413612/09/2017 às 14:26
-
Quem quiser implementar essa ideia, sugiro esse site de imagens: pixabay.com/pt– user2413612/09/2017 às 14:26
-
1Obgado @Fox.11, tenho sempre de andar à procura de imagens cada vez que quero exemplificar alguma coisa com imagens– Miguel12/09/2017 às 14:29
-
Miguel esse exemplo não é automaticamente, precisa colocar o week_day.– user8156012/09/2017 às 15:41
-
@MatheusCalixto é o mesmo que o teu, é automático consoante o dia da semana, que no teu caso é
imagenumber
– Miguel12/09/2017 às 15:50