- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
$(document).ready(function() {
// get elements only once instead of every Interval
var clock = {};
clock.seconds = $('.clock_seconds');
clock.minutes = $('.clock_minutes');
clock.hours = $('.clock_hours');
setInterval( function() {
// get time
var date = new Date();
var seconds = date.getSeconds();
var mins = date.getMinutes();
var hours = date.getHours();
// count degrees
var seconds_degree = seconds * 6; // 60 secs * 6 deg = 360 deg
var minutes_degree = mins * 6; // 60 mins * 6 deg = 360 deg
var hours_degree = hours * 30 + (mins / 2); // 12 hours * 30 = 360 deg
// apply transform
clock.seconds.css({"-moz-transform" : 'rotate('+seconds_degree+'deg)'});
clock.minutes.css({"-moz-transform" : 'rotate('+minutes_degree+'deg)'});
clock.hours.css({"-moz-transform" : 'rotate('+hours_degree+'deg)'});
}, 1000 );
});