Ir para conteúdo

POWERED BY:

Arquivado

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

berkowitz

[Resolvido] Montagem de barra colorida

Por , em Javascript

Recommended Posts

berkowitz    2

berkowitz
Postado

Fala pessoal, beleza?

Estou com uma dúvida e não sei nem como perguntar! rs...

 

Dêem uma olhada na imagem abaixo:

Imagem Postada

 

Alguém tem idéia de como criar isso? Uma barra com uma tamanho fixo (500px por exemplo, que seria os 100%).

Criada a barra precisarei "pintar" a quantidade de veículos na garagem (vermelho). Então faço como?

- A porcentagem de carros na garagem (cor vermelha) somam X (que é (TotalCor/TotalFrota)*100).

- Aí eu pego o tamanho do meu quadro (500px) e pinto X% dele?

E os X% do meu quadrado? Seria (larguraQuadrado*X)/100?

 

Aí o esquema é eu ir montando DIVs, uma ao lado da outra, até somarem juntas 500px?

Essa é a linha de raciocínio? Alguém pode me dar uma luz por favor?

 

VALEW!

ABRAX!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

berkowitz    2

berkowitz
Postado

Bom... resolvido!

Se alguém um dia precisar já tem aqui.

 

<html>
	<head>
		<script language="javascript" type="text/javascript" src="includes/jquery.js"></script>
		<script language="javascript">
		<!--
			function montaQuadro() {
				$("<div class='mae'></div><br />").appendTo("BODY");
		
				var cores = ['#d60f0f','#14881e','#999999','#1078ba','#2d3e83','#ee9a23','#c46213'];
				var largura;
				var frotaTot = arguments[0];
				var larguraQuadro = parseInt($(".mae").css('width'));
				
				for(i=1; i<arguments.length; i++) {
					if(arguments[i] > 0) {
						largura = (arguments[i]/frotaTot)*100;
						$("<div class='oi' style='width: "+Math.round(largura)+"%; background-color: "+cores[i-1]+";'>"+arguments[i]+"</div>").appendTo(".mae");
					}
				}
			}
			
			onload = function() {
				/*
						montaQuadro(
							QUANTIDADE DE VEÍCULOS DA FROTA,
							QUANTIDADE DE VEÍCULOS NA GARAGEM,
							QUANTIDADE DE VEÍCULOS EM POSICIONAMENTO,
							QUANTIDADE DE VEÍCULOS COM PROBLEMAS,
							QUANTIDADE DE VEÍCULOS SEGUINDO PARA O TERMINAL SECUNDÁRIO,
							QUANTIDADE DE VEÍCULOS PARADOS NO TERMINAL PRINCIPAL,
							QUANTIDADE DE VEÍCULOS SEGUINDO PARA O TERMINAL PRINCIPAL,
							QUANTIDADE DE VEÍCULOS PARADOS NO TERMINAL SECUNDÁRIO
						);
				*/
				montaQuadro(250,59,15,71,72,21,12,0);
				//montaQuadro(276,18,37,3,81,40,75,23);
			}
		//-->
		</script>
		<style type="text/css">
			BODY {
				font-family: Verdana, Arial, Helvetica, sans-serif;
				font-size: 10px;
			}
		
			.mae {
				width: 90%;
				border: 2px solid #CCC;
				color: #FFF;
				font-weight: bolder;
				text-align: center;
			}
		
			.oi {
				height: 30px;
				display: inline-table;
				#display: inline;
				padding-top: 8px;
			}
		</style>
	</head>
	
	<body></body>
</html>

Abrax!

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