Relógio Binário (parte 3)

E esse é um dos meus “brinquedinhos” favoritos e eu amo ficar mexendo! Dessa vez, além de refatorar e melhorar o código, consegui colocar dois opcionais (vindos da URL): cor e tamanho.

Dessa vez ele ficou assim:

<html> 
	<head> 
		<title>Relógio Binário</title> 
		<script language="JavaScript"> 
			function dec_bin(limite,dec,cor,tam){
				var resultado = '';
				var imprimir = '';
				
				var cor_do_relogio = new Array();
				cor_do_relogio['rosa']			= '#FF69B4';
				cor_do_relogio['pink']			= '#FF69B4';
				cor_do_relogio['roxo']			= '#9932CC';
				cor_do_relogio['purple']		= '#9932CC';
				cor_do_relogio['vermelho']		= '#FF0000';
				cor_do_relogio['laranja']		= '#FFA500';
				cor_do_relogio['orange']		= '#FFA500';
				cor_do_relogio['red']			= '#FF0000';
				cor_do_relogio['verde'] 		= '#ADFF2F';
				cor_do_relogio['green'] 		= '#ADFF2F';
				cor_do_relogio['azul']			= '#0000FF';
				cor_do_relogio['blue']			= '#0000FF';
				cor_do_relogio['azul_escuro']	= '#0000CD';
				cor_do_relogio['dark_blue']		= '#0000CD';				
				cor_do_relogio['verde_escuro']	= '#228B22';
				cor_do_relogio['green_blue']	= '#228B22';				
				cor_do_relogio['verde_escuro']	= '#228B22';
				cor_do_relogio['green_blue']	= '#228B22';
				
				var tamanho = new Array();
				tamanho['small'] = '15px';
				tamanho['medium'] = '25px';
				tamanho['big'] = '35px';
				
				
				while(dec > 0){
					resultado = resultado + dec%2;
					dec = parseInt(dec/2);
				}	
				
				var relogio = new Array();
				relogio[0] = '<div style="border: 5px solid '+cor_do_relogio[cor]+'; width: '+tamanho[tam]+'; height: '+tamanho[tam]+'; float: left; margin-right: 10px; " ></div>';
				
				relogio[1] = '<div style="border: 5px solid '+cor_do_relogio[cor]+'; width: '+tamanho[tam]+'; height: '+tamanho[tam]+'; background-color: '+cor_do_relogio[cor]+'; float: left; margin-right: 10px; "></div>';
				
				for(var i = (limite-1); i >= 0; i--){
					//imprimir = imprimir + resultado.substr(tam,1);
					if(resultado.substr(i,1) == ''){
						imprimir = imprimir + relogio[0];
					}else{
						imprimir = imprimir + relogio[parseInt(resultado.substr(i,1))];
					}
				}
				
				return imprimir;
			}
			
			function moveRelogio(){ 
				var variaveis	= location.search.split("?");
				var quebra		= variaveis[1].split("&");
				var cor 		= quebra[0].split("=");
				var tam 		= quebra[1].split("=");
				
				momentoAtual = new Date() 
				hora	= momentoAtual.getHours();
				minuto	= momentoAtual.getMinutes(); 
				segundo = momentoAtual.getSeconds();
				
				var espaco = new Array();
				espaco['small']		= '40px';
				espaco['medium']	= '50px';
				espaco['big']		= '60px';

				document.getElementById('hora').style.paddingBottom		= espaco[tam[1]];
				document.getElementById('minutos').style.paddingBottom	= espaco[tam[1]];
				document.getElementById('segundos').style.paddingBottom = espaco[tam[1]];
				
				document.getElementById('hora').innerHTML		= dec_bin(5,hora,cor[1],tam[1]);
				document.getElementById('minutos').innerHTML	= dec_bin(6,minuto,cor[1],tam[1]);
				document.getElementById('segundos').innerHTML	= dec_bin(6,segundo,cor[1],tam[1]);
				
				setTimeout("moveRelogio()",1000);
			} 
		</script> 
	</head> 

	<body onload="moveRelogio()"> 
		<div id="hora"></div>
		<div id="minutos"></div>
		<div id="segundos"></div>
	</body>
</html>
Anúncios

Um comentário em “Relógio Binário (parte 3)

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s