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.

Anúncios

Um comentário em “Códigos – Relógio binário

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