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 !
Continue lendo “Relógio Binário (parte 2)”

Códigos – Relógio binário

Relógio binário funcionando!
Relógio binário funcionando!

O meu primeiro post vai ser um código de um relógio binário. Por que um relógio binário? Um belo dia eu vi um colega do trabalho com um de pulso. Queria saber como funciona e ter um também (mesmo que seja no computador, mesmo porque não existem modelos bunitinhos para mulheres).
Segue o código abaixo (comentado):

<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();

			horaImprimivel = hora + " : " + minuto + " : " + segundo

			var clock = $('hourBox');
			clock.innerHTML = horaImprimivel;

			convert_dec_bin(hora,'hour');
			convert_dec_bin(minuto,'min');
			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 print = "";

			switch(type){
				case "hour":
					var limite = 4;
					var time_show = $("hour_time");
					break;
				case "min":
					var limite = 5;
					var time_show = $("min_time");
					break;
				case "sec":
					var limite = 5;
					var time_show = $("sec_time");
					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;
				}

				time = time/2;
			}

			//Converte o binário em imagem.
			for(var i = 0; i <= limite; i++){
				if(time_print[i] == 1){
					print += "<div style='background-color:#A020F0;height:15px;width:15px;float:left;margin:5px;'></div>";
				}else{
					if(time_print[i] == 0){
						print += "<div style='height:13px;width:13px;float:left;border:2px solid #A020F0;margin:5px;'></div>";
					}
				}
			}

			time_show.innerHTML = print;
			return time_print;
		}

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

	<body>
		<div id="hourBox"></div><br/>
		Hora:
		<div id="hour_time"></div><br/><Br/>
		Minuto:
		<div id="min_time"></div><br/><br/>
		Segundo:
		<div id="sec_time"></div><br/><br/>
	</body>
</html>

Pronto! Agora eu tenho um relógio binário na cor que eu mais gosto: roxo.