domingo, 24 de febrero de 2013

Reloj digital con Jquery y CSS3

En el siguiente ejemplo se mostrará como crear un reloj digital a través de Jquery y la propiedad transform de CSS3 a través del método rotate.

Reloj Digital
 

<html>

<head>

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>

var fecha = new Date;
horas = fecha.getHours();
minutos = fecha.getMinutes();
segundos = fecha.getSeconds();
seconds = parseInt(segundos)*6-90;
minuts = parseInt(minutos)*6-90;
hours = parseInt(horas)*30+minutos/2 - 90;

function reloj()
{
seconds= seconds+6;
minuts = minuts+0.1;
hours = hours+0.01;

$("#segundos").html("<style>#aguja_segundos{transform: rotate("+seconds+"deg); -ms-transform: rotate("+seconds+"deg); -moz-transform: rotate("+seconds+"deg); -webkit-transform: rotate("+seconds+"deg); -o-transform: rotate("+seconds+"deg);}</style>");
$("#minutos").html("<style>#aguja_minutos{transform: rotate("+minuts+"deg); -ms-transform: rotate("+minuts+"deg); -moz-transform: rotate("+minuts+"deg); -webkit-transform: rotate("+minuts+"deg); -o-transform: rotate("+minuts+"deg);}</style>");
$("#horas").html("<style>#aguja_horas{transform: rotate("+hours+"deg); -ms-transform: rotate("+hours+"deg); -moz-transform: rotate("+hours+"deg); -webkit-transform: rotate("+hours+"deg); -o-transform: rotate("+hours+"deg);}</style>");
setTimeout("reloj()", 1000);

}

$(function()
{
setTimeout("reloj()", 1000);

width_imagen = $("#contenedor_reloj").width();
height_imagen = $("#contenedor_reloj").height();

$("#imagen").css({height: height_imagen+"px", width: width_imagen+"px"});

top_agujas = height_imagen / 2;


width_segundos = width_imagen - 40;
left_segundos = 20;

$("#aguja_segundos").css({top: top_agujas-1+"px", left: left_segundos+"px", height: "2px", width: width_segundos+"px"});

width_minutos = width_imagen - 60;
left_minutos = 30;

$("#aguja_minutos").css({top: top_agujas-1.5+"px", left: left_minutos+"px", height: "3px", width: width_minutos+"px"});

width_horas = width_imagen - 90;
left_horas = 45;

$("#aguja_horas").css({top: top_agujas-2+"px", left: left_horas+"px", height: "4px", width: width_horas+"px"});

});
</script>



<style>
#contenedor_reloj
{
width: 200px;
height: 200px;
}

#imagen
{
position: relative;
z-index: 0;
border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%;o-border-radius:50%;
}

#aguja_segundos
{
position: relative;
z-index: 100;
}

#aguja_minutos
{
position: relative;
z-index: 101;
}

#aguja_horas
{
position: relative;
z-index: 102;
}
</style>
</head>

<body>
<div style="width: 300px; height: 300px;"></div>
<div id="contenedor_reloj">
<img src="https://lh4.googleusercontent.com/-msdONJQU6jc/UerMa1q9uuI/AAAAAAAAElc/eiAG-yveOUw/s225-no/reloj.png" id="imagen">
<div style=" position: relative; top: -200px;">
<div id="aguja_segundos"><div style="width: 50%; height: 100%; float: right; background: #E48A03;"></div></div>
<div id="aguja_minutos"><div style="width: 50%; height: 100%; float: right; background: #353A9A;"></div></div>
<div id="aguja_horas"><div style="width: 50%; height: 100%; float: right; background: #B30101;"></div></div>
</div>
</div>
<span id="segundos"></span>
<span id="minutos"></span>
<span id="horas"></span>
</body>

</html>