Há tempos que não escrevo por aqui, eu sei. É que tenho trabalhado muito... mas outro dia, para exercitar, para "desopilar" o cérebro, resolvi fazer um reloginho digital - sem usar texto, apenas DIVs - setando a cor das bordas. Esse exercício resultou num documento HTML que pode facilmente ser usado em seu site.
Veja o código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Clock</title>
<style type="text/css" title="big">
#clock { background-color:#000; padding:5px; height:55px; width:242px; }
#clock #separator1, #clock #separator2 {
width:20px; padding-top:17px; text-align:center; float:left;
}
#clock #separator1 div, #clock #separator2 div {
width:0; height:0; border:3px solid #CCC; margin:10px 8px 10px 8px;
}
#clock .dig { width:29px; padding:0; float:left; }
#clock .mid { width:20px; height:18px; border:6px solid #CCC; }
#clock .up { border-bottom-width:3px; }
#clock .down { border-top-width:3px; }
#clock .mrig { margin-right:4px; }
#clock .mlef { margin-left:4px; }
</style>
<style type="text/css" title="small">
#clock { background-color:#000; padding:2px; height:23px; width:116px; }
#clock #separator1, #clock #separator2 {
width:7px; height:18px; padding-top:6px; text-align:center; float:left;
}
#clock #separator1 div, #clock #separator2 div {
width:0; height:0; border:1px solid white; margin:5px 2px 5px 1px;
}
#clock .dig { width:15px; padding:0; float:left; }
#clock .mid { width:10px; height:8px; border:2px solid white; }
#clock .up { border-bottom-width:1px; }
#clock .down { border-top-width:1px; }
#clock .mrig { margin-right:2px; }
#clock .mlef { margin-left:2px; }
</style>
<script type="text/javascript">
var _on = 'lightgreen', _off = '#000000', _tt = false;
function apply(digit, num) {
if(/^d[1-6]$/.test(digit) == false) return;
if(/^\d$/.test(num) == false) return;
var d = $(digit), divs = d.getElementsByTagName('div'), el1 = divs[0], el2 = divs[1],
numbers = [
[1,1,0,1,0,1,1,1], [0,1,0,0,0,1,0,0], [1,1,1,0,1,0,1,1], [1,1,1,0,1,1,1,0], [0,1,1,1,1,1,0,0],
[1,0,1,1,1,1,1,0], [1,0,1,1,1,1,1,1], [1,1,0,0,0,1,0,0], [1,1,1,1,1,1,1,1], [1,1,1,1,1,1,0,0]
];
el1.style.borderTopColor = numbers[num][0] ? _on : _off;
el1.style.borderRightColor = numbers[num][1] ? _on : _off;
el1.style.borderBottomColor = numbers[num][2] ? _on : _off;
el1.style.borderLeftColor = numbers[num][3] ? _on : _off;
el2.style.borderTopColor = numbers[num][4] ? _on : _off;
el2.style.borderRightColor = numbers[num][5] ? _on : _off;
el2.style.borderBottomColor = numbers[num][6] ? _on : _off;
el2.style.borderLeftColor = numbers[num][7] ? _on : _off;
}
function tictac() {
var divs1 = $('separator1').getElementsByTagName('div');
for(var i = 0; i < divs1.length; i++)
divs1[i].style.borderColor = _tt ? _off : _on;
var divs2 = $('separator2').getElementsByTagName('div');
for(var i = 0; i < divs2.length; i++)
divs2[i].style.borderColor = _tt ? _off : _on;
_tt = (!_tt);
}
function setClock(color) {
var d = new Date(), h = d.getHours(), m = d.getMinutes(), s = d.getSeconds();
if(h < 10) h = '0'+h;
if(m < 10) m = '0'+m;
if(s < 10) s = '0'+s;
apply('d6', Number(String(s).substring(1,2)));
apply('d5', Number(String(s).substring(0,1)));
apply('d4', Number(String(m).substring(1,2)));
apply('d3', Number(String(m).substring(0,1)));
apply('d2', Number(String(h).substring(1,2)));
apply('d1', Number(String(h).substring(0,1)));
tictac();
setTimeout(setClock, 1000);
setTimeout(tictac, 500);
}
function $(id) {
return typeof(id) == 'object' ? id : (document.getElementById(id) || null);
}
function stl(s) {
var stls = document.getElementsByTagName('style');
for(var i = 0; i < stls.length; i++) stls[i].disabled = (stls[i].title != s);
}
</script>
</head>
<body onload="setClock(); stl('big');">
<p style="clear:both; margin-bottom:20px">
<a href="javascript://" onclick="stl('big')">grande</a> |
<a href="javascript://" onclick="stl('small')">pequeno</a>
</p>
<div id="clock">
<div id="d1" class="dig mrig">
<div id="d1u" class="mid up"></div>
<div id="d1d" class="mid down"></div>
</div>
<div id="d2" class="dig mlef">
<div id="d2u" class="mid up"></div>
<div id="d2d" class="mid down"></div>
</div>
<div id="separator1">
<div></div>
<div></div>
</div>
<div id="d3" class="dig mrig">
<div id="d3u" class="mid up"></div>
<div id="d3d" class="mid down"></div>
</div>
<div id="d4" class="dig mlef">
<div id="d4u" class="mid up"></div>
<div id="d4d" class="mid down"></div>
</div>
<div id="separator2">
<div></div>
<div></div>
</div>
<div id="d5" class="dig mrig">
<div id="d5u" class="mid up"></div>
<div id="d5d" class="mid down"></div>
</div>
<div id="d6" class="dig mlef">
<div id="d6u" class="mid up"></div>
<div id="d6d" class="mid down"></div>
</div>
</div>
</body>
</html>
E aqui essa página carregada (em uma nova janela)
Abraços, Cau
8 Comentários
Idéia legal! Gostei mesmo. Só não gostei dos separadores piscando, acho que ficava melhor só os segundos correndo… Mas gostei…
Até mais!
Valeu Julio
tenho certeza que isso não seria problema para vc, mas se outros acharem a mesma coisa… basta comentar a linha:
// setTimeout(tictac, 500);
Abraço, Cau
Caceeeta velho!!
Você fez um painel digital com js uaheuhae, muito doido.
Agente estuda isso aí em eletrônica. ficou 10!!
Ae Micox, beleza?
Tô sumido, mas continuo por aí…
Valeu!
Obrigado pelo codigo de relogio digital
Amigo muito bom o script, sabe me dizer como eu faço para fixar ele no meu site no tamanho pequeno e sem o comentario de tamanho
um abraço
anderson
Anderson, na página de exemplo há dois blocos de CSS (2 tags <style>) com atributos TITLE setados para ‘big’ e ’small’. Apague o big (a tag <style> inteira) e elimine os links. Pronto restou apenas o relogio pequeno.
Olá,
o relógio digital ficou muito bom. Queria saber como eu poderia colocar ele decrescente. Igual um temporizador.
Abraço