Relógio Binário (parte 2)

Há alguns meses atrás eu publiquei aqui o meu relógio binário. Diferente da primeira versão nessa eu adiciono:

  • Data na versão normal e binária;
  • Mais opções de cores nas caixas/boxes;
  • Mais opções de tamanho nas caixas/boxes;
  • Legenda nas caixas (quando vc passa o mousse sobre as caixas/boxes aparece o valor);

Clique no link abaixo para var o código+CSS. Antes que eu sofra retaliações ou castigos, eu não sei fazer FRONT !

Segue o código (comentado) do relogio_binario.php abaixo:

<html>
	<head>
		<title>Relogio binário</title>
		<script language="JavaScript">
		//Frescurinha, para evitar ficar digitando "document.getElementById"
		function $(variavel){
			return document.getElementById(variavel);
		}

		//Essa função que traz o relógio normal
		function moveRelogio(){
			momentoAtual = new Date();
			
			hora = momentoAtual.getHours();
			minuto = momentoAtual.getMinutes();
			segundo = momentoAtual.getSeconds();
			dia = momentoAtual.getDate();
			mes = momentoAtual.getMonth()+1;
			ano = momentoAtual.getFullYear()%100;
			
			//Imprimi a hora e a data.
			horaImprimivel = " "+hora + " : " + minuto + " : " + segundo
			dataImprimir = dia + " / " + mes + " / " + ano;
			$('hourBox').innerHTML = horaImprimivel;
			$('dataBox').innerHTML = dataImprimir;
			
			$('dia').innerHTML = convert_dec_bin(dia,'day');
			$('mes').innerHTML = convert_dec_bin(mes,'month');
			$('ano').innerHTML = convert_dec_bin(ano,'year');
			$('hora').innerHTML = convert_dec_bin(hora,'hour');
			$('min').innerHTML = convert_dec_bin(minuto,'min');
			$('seg').innerHTML = convert_dec_bin(segundo,'sec');

			//Função que carrega o relógio a cada 1 segundo. 1000 = 1 segundo.
			setTimeout("moveRelogio()",1000);
		}

		//Essa função traz o relógio binário
		function convert_dec_bin(time,type){
			var time_print = new Array();
			var valor = new Array();
			var cont = 0;
			var print = "";

			switch(type){
				case 'day':
					var limite = 4;
					break;
				case 'month':
					var limite = 4;
					break;
				case 'year':
					var limite = 6;
					break;
				case "hour":
					var limite = 4;
					break;
				case "min":
					var limite = 5;
					break;
				case "sec":
					var limite = 5;
					break;
			}
				
			//Converte o número decimal para binário. Para a hora tem um limite diferente dos minutos e segundos.
			for(var i = limite; i >= 0; i--){
				time_print[i] = time%2;
				
				if(time_print[i] == 1){
					time = time-1;					
					valor[i] = Math.pow(2,cont);
				}else{
					valor[i] = 0;
				}		
				
				time = time/2;
				cont = cont+1;
			}
			
			var tam_nome = $('tamanho').value;
			var cor_nome = $('cor').value;
			var box_fundo = tam_nome+"_fundo_"+cor_nome;
			var box_borda = tam_nome+"_borda_"+cor_nome;
			
			//Converte o binário em imagem.
			for(var i = 0; i <= limite; i++){
				if(time_print[i] == 1){
					print += "<div class='"+box_fundo+"' title='"+valor[i]+"' alt='"+valor[i]+"'></div>";
				}else{
					if(time_print[i] == 0){
						print += "<div class='"+box_borda+"' title='"+valor[i]+"' alt='"+valor[i]+"'></div>";
					}
				}
			}
			
			return print;
		}

		//Quando a página carregar, vai carregar junto o relógio
		window.onload = function(){
			moveRelogio()
		}
		</script>
		<link rel="stylesheet" href="style.css">
	</head>

	<body>
		<form action="" method="post">			
			<?php $tamanho = (isset($_POST['tamanho'])) ? $_POST['tamanho'] : "tam_15";?>
			<input type="hidden" id="tamanho" name="tamanho" value="<?php echo $tamanho; ?>" />
			
			<?php $cor = (isset($_POST['cor'])) ? $_POST['cor'] : "amarelo";?>
			<input type="hidden" id="cor" name="cor" value="<?php echo $cor?>" />
			
			<div class="escolha">
				<?php 
					$lista_tam = array(
						0 => array(	'nome' => 'tam_15', 'descricao' => "15px"),
						1 => array(	'nome' => 'tam_20', 'descricao' => "20px"),
						2 => array(	'nome' => 'tam_25', 'descricao' => "25px"),
					);
				?>
					<p><strong>Tamanho</strong></p>
				<?php
					foreach($lista_tam as $i => $lt){
						$tamanho_escolhido = (isset($_POST['tamanho'])) ? (($_POST['tamanho'] == $lt['nome']) ? "checked" : "") : (($i == 0) ? "checked" : "" );
				?>
						<p><input type="radio" id="tamanho" name="tamanho" value="<?php echo $lt['nome']?>" <?php echo $tamanho_escolhido;?> /><?php echo $lt['descricao']?></p>
				<?php	
					}
				?>
				
				<br/>
				
				<?php 
					$lista_cor = array(
						0 => array( 'nome' => 'amarelo', 'descricao' => 'Amarelo', 'style' => 'color:FFFF00;font-weight: bold;'),
						1 => array( 'nome' => 'laranja', 'descricao' => 'Laranja', 'style' => 'color:FFA500;font-weight: bold;'),
						2 => array( 'nome' => 'vermelho', 'descricao' => 'Vermelho', 'style' => 'color:FF0000;font-weight: bold;'),
						3 => array( 'nome' => 'rosa_claro', 'descricao' => 'Rosa Claro', 'style' => 'color:FF69B4;font-weight: bold;'),
						4 => array( 'nome' => 'rosa_escuro', 'descricao' => 'Rosa Escuro', 'style' => 'color:FF1493;font-weight: bold;'),
						5 => array( 'nome' => 'roxo_claro', 'descricao' => 'Roxo Claro', 'style' => 'color:DA70D6;font-weight: bold;'),
						6 => array( 'nome' => 'roxo_escuro', 'descricao' => 'Roxo Escuro', 'style' => 'color:A020F0;font-weight: bold;'),
						7 => array( 'nome' => 'azul_claro', 'descricao' => 'Azul Claro', 'style' => 'color:0000FF;font-weight: bold;'),
						8 => array( 'nome' => 'azul_escuro', 'descricao' => 'Azul Escuro', 'style' => 'color:000080;font-weight: bold;'),
						9 => array( 'nome' => 'verde_claro', 'descricao' => 'Verde Claro', 'style' => 'color:00FF00;font-weight: bold;'),
						10 => array( 'nome' => 'verde_escuro', 'descricao' => 'Verde Escuro', 'style' => 'color:008000;font-weight: bold;'),
					);
				?>
				
					<p><strong>Cor</strong></p>
				<?php
					foreach($lista_cor as $i => $lc){
						$cor_escolhida = (isset($_POST['cor'])) ? (($_POST['cor'] == $lc['nome']) ? "checked" : "") : (($i == 0) ? "checked" : "");
				?>
						<p style="<?php echo $lc['style']?>"><input type="radio" id="cor" name="cor" value="<?php echo $lc['nome']?>" <?php echo $cor_escolhida;?> /><?php echo $lc['descricao']?></p>
				<?php
					}
				?>
				<input type="submit" value="Configurar" />
			</form>
		</div>

		<div class="escolha">
			<p>Hoje é dia: <span id="dataBox"></span></p>
			<table>
				<tr>
					<td align="right">Dia: </td>
					<td><div id="dia"></div></td>
				</tr>
				<tr>
					<td align="right">Mês: </td>
					<td><div id="mes"></div></td>
				</tr>
				<tr>
					<td align="right">Ano: </td>
					<td><div id="ano"></div></td>
				</tr>
			</table><br/>
			
			<p>Agora são: <span id="hourBox"></span></p>
			<table>
				<tr>
					<td align="right">Hora: </td>
					<td><div id="hora"></div></td>
				</tr>
				<tr>
					<td align="right">Minuto: </td>
					<td><div id="min"></div></td>
				</tr>
				<tr>
					<td align="right">Segundo: </td>
					<td><div id="seg"></div></td>
				</tr>
			</table>
		</div>
	</body>
</html>

E o CSS, style.css. Eu me empolguei colocando as cores e por esse motivo ficou enorme:

body{ font-family: Arial; font-size: 14px; }
.escolha{ float:left; }

.tam_15_fundo_amarelo{ background-color:#FFFF00; height:15px; width:15px; float:left; margin:5px; }
.tam_15_borda_amarelo{ border:2px solid #FFFF00; height:13px; width:13px; float:left; margin:5px; }
.tam_20_fundo_amarelo{ background-color:#FFFF00; height:20px; width:20px; float:left; margin:5px; }
.tam_20_borda_amarelo{ border:2px solid #FFFF00; height:18px; width:18px; float:left; margin:5px; }
.tam_25_fundo_amarelo{ background-color:#FFFF00; height:25px; width:25px; float:left; margin:5px; }
.tam_25_borda_amarelo{ border:2px solid #FFFF00; height:22px; width:22px; float:left; margin:5px; }

.tam_15_fundo_laranja{ background-color:#FFA500; height:15px; width:15px; float:left; margin:5px; }
.tam_15_borda_laranja{ border:2px solid #FFA500; height:13px; width:13px; float:left; margin:5px; }
.tam_20_fundo_laranja{ background-color:#FFA500; height:20px; width:20px; float:left; margin:5px; }
.tam_20_borda_laranja{ border:2px solid #FFA500; height:18px; width:18px; float:left; margin:5px; }
.tam_25_fundo_laranja{ background-color:#FFA500; height:25px; width:25px; float:left; margin:5px; }
.tam_25_borda_laranja{ border:2px solid #FFA500; height:22px; width:22px; float:left; margin:5px; }

.tam_15_fundo_vermelho{ background-color:#FF0000; height:15px; width:15px; float:left; margin:5px; }
.tam_15_borda_vermelho{ border:2px solid #FF0000; height:13px; width:13px; float:left; margin:5px; }
.tam_20_fundo_vermelho{ background-color:#FF0000; height:20px; width:20px; float:left; margin:5px; }
.tam_20_borda_vermelho{ border:2px solid #FF0000; height:18px; width:18px; float:left; margin:5px; }
.tam_25_fundo_vermelho{ background-color:#FF0000; height:25px; width:25px; float:left; margin:5px; }
.tam_25_borda_vermelho{ border:2px solid #FF0000; height:22px; width:22px; float:left; margin:5px; }			

.tam_15_fundo_rosa_claro{ background-color:#FF69B4; height:15px; width:15px; float:left; margin:5px; }
.tam_15_borda_rosa_claro{ border:2px solid #FF69B4; height:13px; width:13px; float:left; margin:5px; }
.tam_20_fundo_rosa_claro{ background-color:#FF69B4; height:20px; width:20px; float:left; margin:5px; }
.tam_20_borda_rosa_claro{ border:2px solid #FF69B4; height:18px; width:18px; float:left; margin:5px; }
.tam_25_fundo_rosa_claro{ background-color:#FF69B4; height:25px; width:25px; float:left; margin:5px; }
.tam_25_borda_rosa_claro{ border:2px solid #FF69B4; height:22px; width:22px; float:left; margin:5px; }

.tam_15_fundo_rosa_escuro{ background-color:#FF1493; height:15px; width:15px; float:left; margin:5px; }
.tam_15_borda_rosa_escuro{ border:2px solid #FF1493; height:13px; width:13px; float:left; margin:5px; }
.tam_20_fundo_rosa_escuro{ background-color:#FF1493; height:20px; width:20px; float:left; margin:5px; }
.tam_20_borda_rosa_escuro{ border:2px solid #FF1493; height:18px; width:18px; float:left; margin:5px; }
.tam_25_fundo_rosa_escuro{ background-color:#FF1493; height:25px; width:25px; float:left; margin:5px; }
.tam_25_borda_rosa_escuro{ border:2px solid #FF1493; height:22px; width:22px; float:left; margin:5px; }

.tam_15_fundo_roxo_claro{ background-color:#DA70D6; height:15px; width:15px; float:left; margin:5px; }
.tam_15_borda_roxo_claro{ border:2px solid #DA70D6; height:13px; width:13px; float:left; margin:5px; }
.tam_20_fundo_roxo_claro{ background-color:#DA70D6; height:20px; width:20px; float:left; margin:5px; }
.tam_20_borda_roxo_claro{ border:2px solid #DA70D6; height:18px; width:18px; float:left; margin:5px; }
.tam_25_fundo_roxo_claro{ background-color:#DA70D6; height:25px; width:25px; float:left; margin:5px; }
.tam_25_borda_roxo_claro{ border:2px solid #DA70D6; height:22px; width:22px; float:left; margin:5px; }

.tam_15_fundo_roxo_escuro{ background-color:#A020F0; height:15px; width:15px; float:left; margin:5px; }
.tam_15_borda_roxo_escuro{ border:2px solid #A020F0; height:13px; width:13px; float:left; margin:5px; }
.tam_20_fundo_roxo_escuro{ background-color:#A020F0; height:20px; width:20px; float:left; margin:5px; }
.tam_20_borda_roxo_escuro{ border:2px solid #A020F0; height:18px; width:18px; float:left; margin:5px; }
.tam_25_fundo_roxo_escuro{ background-color:#A020F0; height:25px; width:25px; float:left; margin:5px; }
.tam_25_borda_roxo_escuro{ border:2px solid #A020F0; height:22px; width:22px; float:left; margin:5px; }

.tam_15_fundo_azul_claro{ background-color:#0000FF; height:15px; width:15px; float:left; margin:5px; }
.tam_15_borda_azul_claro{ border:2px solid #0000FF; height:13px; width:13px; float:left; margin:5px; }
.tam_20_fundo_azul_claro{ background-color:#0000FF; height:20px; width:20px; float:left; margin:5px; }
.tam_20_borda_azul_claro{ border:2px solid #0000FF; height:18px; width:18px; float:left; margin:5px; }
.tam_25_fundo_azul_claro{ background-color:#0000FF; height:25px; width:25px; float:left; margin:5px; }
.tam_25_borda_azul_claro{ border:2px solid #0000FF; height:22px; width:22px; float:left; margin:5px; }

.tam_15_fundo_azul_escuro{ background-color:#000080; height:15px; width:15px; float:left; margin:5px; }
.tam_15_borda_azul_escuro{ border:2px solid #000080; height:13px; width:13px; float:left; margin:5px; }
.tam_20_fundo_azul_escuro{ background-color:#000080; height:20px; width:20px; float:left; margin:5px; }
.tam_20_borda_azul_escuro{ border:2px solid #000080; height:18px; width:18px; float:left; margin:5px; }
.tam_25_fundo_azul_escuro{ background-color:#000080; height:25px; width:25px; float:left; margin:5px; }
.tam_25_borda_azul_escuro{ border:2px solid #000080; height:22px; width:22px; float:left; margin:5px; }

.tam_15_fundo_verde_claro{ background-color:#00FF00; height:15px; width:15px; float:left; margin:5px; }
.tam_15_borda_verde_claro{ border:2px solid #00FF00; height:13px; width:13px; float:left; margin:5px; }
.tam_20_fundo_verde_claro{ background-color:#00FF00; height:20px; width:20px; float:left; margin:5px; }
.tam_20_borda_verde_claro{ border:2px solid #00FF00; height:18px; width:18px; float:left; margin:5px; }
.tam_25_fundo_verde_claro{ background-color:#00FF00; height:25px; width:25px; float:left; margin:5px; }
.tam_25_borda_verde_claro{ border:2px solid #00FF00; height:22px; width:22px; float:left; margin:5px; }

.tam_15_fundo_verde_escuro{ background-color:#008000; height:15px; width:15px; float:left; margin:5px; }
.tam_15_borda_verde_escuro{ border:2px solid #008000; height:13px; width:13px; float:left; margin:5px; }
.tam_20_fundo_verde_escuro{ background-color:#008000; height:20px; width:20px; float:left; margin:5px; }
.tam_20_borda_verde_escuro{ border:2px solid #008000; height:18px; width:18px; float:left; margin:5px; }
.tam_25_fundo_verde_escuro{ background-color:#008000; height:25px; width:25px; float:left; margin:5px; }
.tam_25_borda_verde_escuro{ border:2px solid #008000; height:22px; width:22px; float:left; margin:5px; }
Anúncios

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

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