Los chicos de CSS Trick nos muestran un reloj formado por una estructura basa en <ul></ul> que nos permite mostrar un reloj de manillas que se moverán con Javascript (jQuery) y el uso de transformaciones CSS3.
// HTML <ul id="clock"> <li id="sec"></li> <li id="hour"></li> <li id="min"></li> </ul> // JS $(document).ready(function() { setInterval( function() { var seconds = new Date().getSeconds(); var sdegree = seconds * 6; var srotate = "rotate(" + sdegree + "deg)"; $("#sec").css("-webkit-transform", srotate ); }, 1000 ); setInterval( function() { var hours = new Date().getHours(); var mins = new Date().getMinutes(); var hdegree = hours * 30 + (mins / 2); var hrotate = "rotate(" + hdegree + "deg)"; $("#hour").css("-webkit-transform", hrotate ); }, 1000 ); setInterval( function() { var mins = new Date().getMinutes(); var mdegree = mins * 6; var mrotate = "rotate(" + mdegree + "deg)"; $("#min").css("-webkit-transform", mrotate ); }, 1000 ); });
Si nos fijamos en el código Javascript, vemos que únicamente nos funcionará en navegadores basados en WebKit y es que lo que hacemos es aplicar el estilo -webkit-transform: rotate();
a los elementos que componen las manillas del reloj.
0 comentarios, 0 referencias
+
#