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.
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvendSGNEg8hYy8Vtd8v4nsLIHG-e1F-v2uZl7t55aFUtOa54b9BCbtJacgPUUTkXxNs6mjpjGiS8j7rdJWIgKLaH1-5LoShHNoDD5tfWnajPjB0bKNgfZzXVnLrXfhTRpqJ8sRuVBGBI/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>
No hay comentarios:
Publicar un comentario