Zebra lines - Linhas com cores variadas
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.
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>Abraços a todos! :lol:
Discussão (2)
Carregando comentários...