1

Como posso fazer uma função com Javascript que: sempre que atualizar a página, altere o background-color da tag body para uma das cores predefinidas? Exemplo: Quero definir umas 3 cores diferentes, para que sempre que a página for atualizada, altere para uma dessas 3 cores aleatóriamente, e isso ocorra sempre que a página for atualizada. Não sei como fazer essa função, até agora o que eu tenho é isso:

function mudarCores() {
    document.body.style.background = "#FF00FF";
}
1
  • Como eu faria: Colocaria uma id no body. Salvaria as cores possíveis dentro de uma array. Usaria a função Math.random para selecionar uma dessas cores. Em seguida usaria getElementById('idDoBody).style.background = CorEscolhida. Me conta se deu certo 2/04/2021 às 10:32

2 Respostas 2

0

Uma forma de fazer isso, é gravar a informação da cor no localStorage do navegador e no onLoad da página, ler essa informação e trocar a cor com base nela.

Exemplo:

//Evento de onload, será quando a página for acessada ou sofrer uma atualização
window.onload = function(){
  //Pego a cor no localStorage
  let color = localStorage.getItem("color");

  //Índice de busca da cor
  let indexColor = 0;

  //Paleta de cores pré-definidas
  let colors = ["#FF00FF", "#464131", "#269486"];

  //Se a cor não estiver nula, já existe algum no localStorage, então usamos ela
  //caso contrário, começa em zero, conforme o indexColor declaro anteriormente
  if (color != null) {
    indexColor = parseInt(color);
  }

  //Seto a cor de fundo
  document.body.style.backgroundColor = colors[indexColor];

  //Incremento a cor para mudar no próximo carregamento
  indexColor++;

  //Se a cor estiver do tamanho do array, preciso recomeçar a contagem
  //caso contrário, posso acessar uma posição inválida do array
  if (indexColor === colors.length) {
    indexColor = 0;    
  }

  //Gravo no localStorage o índice da próxima cor que será usada
  localStorage.setItem("color", indexColor.toString());
}

Documentações:

https://developer.mozilla.org/pt-BR/docs/Web/API/Window/localStorage https://developer.mozilla.org/pt-BR/docs/Web/API/Storage

0

Toda vez que o documento carregar selecione uma cor aleatóriamente.

const cores = ['black', 'red', 'navy'];

window.addEventListener('load', function() {
  document.body.style.backgroundColor = cores[Math.floor(Math.random() * cores.length)]
});

Evento load.
Objeto window.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .