技术要点
css3的transform:rotate();
js的date()对象;
css
。指针旋转的原点设为底部中心:transform-origin:center bottom;
。旋转引起的锯齿,可以通过设置:translateZ(0)来改善;
js
。使用date对象得出当前时分秒,按照表面计算出旋转的角度旋转即可。
。用cssText属性批量操作样式
function id(obj){
return document.getElementById(obj);
}
var today=new Date(),
year = today.getFullYear(),
month = today.getMonth()+1, //获取当前月份(0-11,0代表1月)
day = today.getDate(),
h=today.getHours(),
m=today.getMinutes(),
s = today.getSeconds();
//时
var hourDeg = h * 30 + m*30/60,
hourrotate = 'rotate('+hourDeg+'deg)';
hcss = '-moz-transform:' + hourrotate + ';-o-transform:' + hourrotate + ';-ms-transform:' + hourrotate;
id('JclockHour').style.cssText = hcss;
id('JclockHour').style.webkitTransform = hourrotate;//webkit
//分
var minuteDeg = m*6 + s*6/60,
...
//秒
var secondDeg = s*6,
...