Question

Can anyone please tell me how can I revolve a div around another div in a timed fashion? The basic motive is to make a countdown timer/clock.

Answer 1

Use trigonometry and setInterval:

HTML:

<div id="a">a</div><div id="b">b</div>

CSS:

div { position: absolute; }
#a { top: 50px; left: 50px; background-color: red; }
#b { top: 0px; left: 0px; background-color: green; }

Script:

var angle = 0;     // starting position (degrees)
var distance = 30; // distance of b from a
var speed = 60;    // revolution speed in degrees per second
var rate  = 10;    // refresh rate in ms

function f() {

    var o = $('#a').offset();

    var t = o.top + (distance * Math.sin(Math.round(angle) * Math.PI/180.0));
    var l = o.left+ (distance * Math.cos(Math.round(angle) * Math.PI/180.0));

    $('#b').css({
        top: t,
        left: l
    });

    angle += (speed * (rate/1000)) % 360;
}

$(function() {
   setInterval(f, rate);
});

Live demo.

You may wish to fiddle with the positions if you want to do this without absolute positioning.