Rotate image via javascript using CSS

Question

I'm doing a clock in javascript and I am not sure this way is the best way to rotate the pointers.

Is this ok, or is there a better way?

// browser vendors var browsers = [ 'webkit', 'Moz', 'ms', 'O', '']; // function to move the pointers function moveMe(el, unit) { var deg = unit * 360 / 60; browsers.each(function (b) { el.style[b + 'Transform'] = 'rotate(' + deg + 'deg)'; }); } // function to check the time function checkTime() { var date = new Date(); var seconds = date.getSeconds(); var minutes = date.getMinutes(); var hours = date.getHours(); moveMe(sPointer, seconds); !seconds && moveMe(mPointer, minutes); !minutes && moveMe(hPointer, hours); } 

The fiddle I'm playing with is here.

Answer 1

First of all, your code use Array.each() method, which is a non-standard Javascript method, added by Mootools. I would rather use a standard loop, in order to keep a vanilla JS code.

Then, instead of setting all properties every time, you should test which properties are supported by the browser and set them accordingly.

Finally, since you are moving minutes only when !seconds (i.e. seconds == 0), the clock initialization is a bit weird. On page load, you should always move minutes and hours.

Answer 2

In GCC, if you write !seconds && moveMe(mPointer, minutes); and compile with -Wall you get this warning:

[Warning] value computed is not used [-Wunused-value] 

I know this is not C, but the problem is the same and I can't see why you don't explicitly write if.