2013-03-29 jQuery Rotate for WorldClock

Tags: JS

I used jQueryRotate and jQuery's native cookie to get the clock rotating and showing the time in your region. This code is a little messy, but it gets the job done.

// Init current time and city
var cur_time = new Date();
var hours = 22.90-parseInt($('#hour').html()); //22.90 is to offset the original position
var minutes = cur_time.getMinutes();
var seconds = parseInt($('#seconds').html());
var c = 0;

// get the city code from the cookie
var mycookie = $.cookie('cityID');
if (mycookie != null) {
c = parseInt(mycookie);
}

// Add conversion from hours to degrees
c = -1 * (c - 1)*(15);
var h = ((hours/24)*360-(minutes/60)*15);
var m = (minutes/60)*360;
var s = (seconds/60)*360;

// Spin up the circles
$('#cities').rotate(c);
$('#hours').rotate(h+c);

// variable indicates if a halt is needed inside of the main interval later on
// while rotation is animated the main interval should not try to update this
var skipHandC = 0;

$('.city').click(function(){
var cityID = $(this).attr('name');
$.cookie('cityID', cityID);
// convert new position to degrees
var newc = -1*(cityID-1)*(15);
i=0;

// skipping the updating should be for 2 agents - hours and cities
skipHandC = 2;
// jQuery's rotate plugin supports animation -- no need to have a loop with setTimeout
$('#cities').rotate({
animateTo:newc,
callback:function() { c = newc; skipHandC--; } // callback function is executed when the animation is done. Lowering the skip by 1
})
$('#hours').rotate({
animateTo:h + newc,
callback:function() { skipHandC--; } // skip is lowered yet again brining it to 0 -- javascript evaluates 0 as false
})
});

var main_rotation=self.setInterval(function() {
if (!skipHandC) { // if a click happened this would fail, and rotation wouldn't happen
$('#cities').rotate(c);
$('#hours').rotate(h+c);
}
$('#second').rotate(s);
$('#minute').rotate(m);

h=h+0.00004166;
m=m+0.001;
s=s+.6;

}, 100);