How to rotate image when time changes?

Question

I have recently made a countdown timer for a website like this! It's pretty much a combination of 2 scripts I found online.

The countdown counts down to February 1st and is pretty static. But the 'clockpicture' is supposed to rotate 6 degrees every second (please see the page source). But it turns out the clock picture will start counting/turning from the moment the page is loaded, so if you arrive there between two seconds the picture will we half a second off, compared to the countdown.

Is there any way I can 'connect' the turning of the picture to the changing of the countdown?

Any help is much appreciated!

put your image rotation into the `tick` method of your countdown. — vaso123, Jan 12 '15 at 11:36
Thanks, that seems like a good solution! Could you maybe show me how to implement it in the tick method? I'd be very grateful. — C.B, Jan 12 '15 at 15:14

vaso123 · Accepted Answer · 2015-01-13T08:45:03.223

EDIT

Based on discussion with OP, finally I found the solution. The problem was, how the browsers handle the rotations.

Ok, so, remove that anim gif, and do some animation there. Create a global variable, called var degrees = 0 at the top of your script. You need to incrase that degrees in every tick with 6. If it reach the 360, then reset it to 0.

For some reason, it not works on jsfiddle, but you can check it on my site. Live demo

Then in your tick function:

if (amount < 0) {
    expired.push(idx);
}
// date is still good
else {
    this.display(cnt, this.format(this.math(amount)));
    if (degrees === 360) {
        degrees = 0;
    }
    degrees += 6;
    obj = document.getElementById('clock');
    if (navigator.userAgent.match("Chrome")) {
        obj.style.WebkitTransform = "rotate(" + degrees + "deg)";
    } else if (navigator.userAgent.match("Firefox")) {
        obj.style.MozTransform = "rotate(" + degrees + "deg)";
    } else if (navigator.userAgent.match("MSIE")) {
        obj.style.msTransform = "rotate(" + degrees + "deg)";
    } else if (navigator.userAgent.match("Opera")) {
        obj.style.OTransform = "rotate(" + degrees + "deg)";
    } else {
        obj.style.transform = "rotate(" + degrees + "deg)";
    }
}

How to rotate image when time changes?

1 Answers1