Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

klonder

Zebra lines - Linhas com cores variadas

Por , em Javascript

Recommended Posts

klonder    14

klonder
Postado

Olá pessoal!

 

Enquanto fazia uma revisão pelos tópicos do fórum, encontrei um post antigo que abordava o tema "Zebra lines", ou seja, variação da cor de fundo (background) entre um linha e outra.

 

Tópico:

http://forum.imasters.com.br/index.php?/topic/324872-mudar-imagem-de-fundo-a-cada-linha-da-tabela/

 

Vejam que no tópico do link acima, fiz um script muito rudimentar para 3 linhas apenas. Para mostrar outra maneira do como fazer a mesma coisa, alterando a cor de mais linhas em sequência (não aleatória) eu fiz o seguinte script:

<html>
<head>
<title>Zebra lines - cores não aleatórias para várias linhas</title>
<script type="text/javascript">
function mostrar_noticias() {
	var objDiv = document.getElementById("noticias");
	var cor = new Array();
	cor[0] = "#0080FF";
	cor[1] = "#894590";
	cor[2] = "#008800";
	cor[3] = "#AAEECC";
	cor[4] = "#0055AA";
	
	var frase = new Array();
	frase[0] = "Essa é minha frase 1";
	frase[1] = "Essa é minha frase 2";
	frase[2] = "Essa é minha frase 3";
	frase[3] = "Essa é minha frase 4";
	frase[4] = "Essa é minha frase 5";
	frase[5] = "Essa é minha frase 6";
	frase[6] = "Essa é minha frase 7";
	frase[7] = "Essa é minha frase 8";
	frase[8] = "Essa é minha frase 9";
	
	var iLinha = 0;
	var iCor = 0;
	
	var bloco = "";
		for(var i=0; i<frase.length; i++){
			if (iCor >= cor.length) {
				iCor = 0;
			}
			bloco += "<span style='background:"+cor[iCor]+"'>"+frase[i]+"</span><br>";
			iCor++;
		}
		objDiv.innerHTML = bloco;
}
window.onload = mostrar_noticias;
</script>
</head>
<body>
<div id="noticias"></div>
</body>
</html>

Todavia, ainda no fórum, vi outra dúvida de um usuário que queria quase a mesma coisa, com a diferença de que o background deveria vir de maneira aleatória.

 

Tópico: http://forum.imasters.com.br/index.php?/topic/379676-tabela-com-cor-aleatoria/page__s__8d5f54ddc28ec5b14c73d8e9feda72cf

 

A dificuldade que tive foi como descobrir uma maneira de aleatorizar o retorno das cores, com a função random(), sem repetição de cores (elas não seriam repetidas até que todas já tivessem sido usadas).

 

Após 2 dias de testes, consegui desvendar o "pequeno mistério" (simples, quando já está pronto).

<html>
<head>
<title>Zebra lines aleatórias - by Klonder</title>
<script type="text/javascript">
function mostrar_noticias() {
	var objNoticias = document.getElementById("noticias");

	var noticia = new Array();
	noticia[0] = "Chove forte em São Paulo no mês de dezembro.";
	noticia[1] = "Chico Anysio é eleito o melhor comediante de 2009.";
	noticia[2] = "Confira o placar da últimas rodadas do Brasileirão.";
	noticia[3] = "Vagner Love traz decepção e choro aos torcedores do Flamengo!";
	noticia[4] = "Veja a lista dos aprovados no vestibular da UFG 2010.";
	noticia[5] = "O curso 'administração do lar' é o mais concorrido da UFMG.";
	noticia[6] = "Klonder é eleito o melhor desenvolvedor de JavaScript do século.";
	noticia[7] = "Ronaldo 'o Fenômeno' bate o próprio recorde e atinge a marca inédita dos 120Kg!";
	
	var cor = new Array();
	cor[0] = "#FFCCFF";
	cor[1] = "#DDD";
	cor[2] = "#FFFFAA";
	cor[3] = "#AAFFD4";
	//cor[4] = "#AAD4FF";
	
	//String que irá armazenar os índices aleatórios;
	var strIndices = "";
	
	//Variável controle responsável por armazenar o números de voltas máxima do while;
	var numCaracteres = (cor.length-1)*3;
	
	//Criando um while até obter a sequência não repetida de "n" casos;
	while (strIndices.length <= numCaracteres) {
	iAtual = '['+Math.floor((Math.random()*cor.length))+']';
		
		//Verificando se o índice Atual não existe na string formada:
		if(strIndices.indexOf(iAtual,0) == -1) {
			strIndices += iAtual;
		}
	}
	
	var textoGeral = "";
	
	//Variável que irá armazenar o resultado de strIndices (string com índices aleatórios);
	//iCor irá variar de 3 em 3, para permitir ao substr pegar as sequências já com as chaves: [0][3][2][4][1]
	var iCor = 0;
	//alert(strIndices); <--- Mostra a string obtida aleatoriamente, sem repetição!!!
	
	//Escrevendo os textos na tela:
	for (var iTextos = 0; iTextos<noticia.length; iTextos++) {
		if (iCor > numCaracteres) {
			iCor = 0;
		}
		//Obtendo a cor do background atual;
		corFundo = "cor"+strIndices.substr(iCor,3);
	
		//textoGeral = "<span style=''></span>";  <-- Formato da string retornada;
		textoGeral += (iTextos+1)+". <span style='background:"+eval(corFundo)+"'> "+noticia[iTextos]+" </span></br>";
		iCor += 3;
	}
	objNoticias.innerHTML = textoGeral;
}

//Carregando a função mostrar_noticias logo após todo o HTML ter sido carregado;
window.onload = mostrar_noticias;
</script>
</head>
<body>
<div id="noticias" style="font-family:tahoma; font-size:12px"></div>
</body>
</html>
São pequenos exemplos que poderão ser utilizados em seu site/blog, para melhorar deixar o visual mais dinâmico.

 

Abraços a todos! :lol:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Pow, legal hein, Klonder! :D

 

Eu fiz uma para OGordo.com que trabalha com classes http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://ogordo.com/tabela-zebrada-com-javascript-e-css3/

 

Gostei bastante dessa aí aleatória.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Oderdenge    42

Guilherme Oderdenge
Postado

Nossa Klonder, muito obrigado pelo script, adorei!

Ah, pela dedicação também, haha.

 

Mas então, como você está respondendo a um tópico meu: como eu posso aplicá-lo a minha necessidade (descrita no tópico de origem)?

 

Desde já, muito obrigado!

Abraços! ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito