-8

Eu gostaria que uma div ficasse alternando as cores, duas cores de preferência. Se quiserem podem colocar mais de um exemplo. Mas, minha preferência, é que a cor mude a cada 40 segundos.

6
  • 2
    Poste o que você já tentou. Commented 15/10/2017 às 17:11
  • eu não tentei ainda, pode ser simple uma div no body e ele troque de cor 40 segundo, já não fiz pq só tenho deia de como se faz, mas sei q é possivél Commented 15/10/2017 às 17:30
  • O que você quer é algo bem simples de fazer, só dar uma pesquisada de leve. Uma dica, pesquise por setTimeOut ou setInterval. A resposta vc vai achar sozinho.
    – Raizant
    Commented 15/10/2017 às 17:31
  • 1
    valeu cara vou da uma olhada Commented 15/10/2017 às 17:32
  • 1
    O que quer dá para fazer literalmente em 2 linhas de javascript, e precisa de utilizar o que o @Knautiluz indicou. Ao tentar obriga-o a aprofundar os seus conhecimentos o que só por si é bastante vantajoso
    – Isac
    Commented 15/10/2017 às 17:33

2 Respostas 2

1

Você pode fazer isso com jQuery de forma simples, da seguinte forma:

$(document).ready(function() {
    var colors = ["#f9f9f9", "#049fce"];//Array com as cores, pode adicionar contas quiser
    var i = 0;
    setInterval(function(){
      $('.divclass').css('background', colors[i]);
      i = (i == (colors.length -1)) ? 0 : i+1;
    },40000);//40 Segundos em Milisegundos
});

Ou com JavaScript puro:

var colors = ["#049fce", "#f9f9f9"];//Array com as cores, pode adicionar contas quiser
var i = 0;
setInterval(function(){
  document.getElementById('divid').style.background = colors[i];//A div deve ter um id, não funciona com class
  i = (i == (colors.length -1)) ? 0 : i+1;
},40000);//40 Segundos em Milisegundos
4
  • Tem a opção com JS vanila? Commented 15/10/2017 às 18:34
  • 1
    Vou atualizar a minha resposta Commented 15/10/2017 às 19:06
  • E se eu quiser utilizar em mais de uma div? setInterval(function(){ $('#Divclass').css('background', colors[i]); i = (i == (colors.length -1)) ? 0 : i+1; },5000); Commented 16/10/2017 às 14:32
  • É só deixar as Divs com as mesma classe Commented 22/10/2017 às 21:31
0

Selecione a div que deseja mudar a cor e use uma função setTimeout com o numero de segundos que precisa, no caso, 40000, use um if para fazer com que um contador esteja sempre os dois índices de um array com duas cores, veja:

const colorDiv = document.querySelector('.change-color');
let counter = 0;

const colorArr = ['red', 'yellow']

setInterval(
	()=> {
		counter++
		
		if (counter == colorArr.length) {
			counter = 0
		}
		
		colorDiv.style.background = colorArr[counter];
	}, 3000
)
.change-color {
	background: red;
	width: 300px;
	height: 300px;
}
<div class="change-color"></div>

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

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