dateTime = new Date();
oHours = dateTime.getHours();
oMinutes = dateTime.getMinutes();
oSeconds = dateTime.getSeconds();
hPointer.css({'transform': 'rotate(' + (-90+oHours*30+oMinutes*6/12) + 'deg)'});
mPointer.css({'transform': 'rotate(' + (-90+oMinutes*6) + 'deg)'});
sPointer.css({'transform': 'rotate(' + (-90+oSeconds*6) + 'deg)'});
}, 1000);
//绘制钟表刻度
for(var i=0; i<60; i++){
var width = 3, height = 6, oBcolor = '#111';
if(i%5 == 0){
width = 5;
height = 10;
}
if(i%15 == 0){
oBcolor = 'red';
}
$("<div class='clockMark'></div>").appendTo(mainId).css({
'width': width,
'height': height,
'position': 'absolute',
'top': 0,
'left': mainId.width()/2,
'background': oBcolor,
'transform': 'rotate(' + i*6 + 'deg)',
"transform-origin": "0 " + mainId.width()/2+'px'
});
}
//绘制钟表指针
function drawPointer (startx, starty, width, height, bcolor, angle) {
var oPointer = $("<div></div>");
oPointer.appendTo(mainId).css({
'width': width,
'height': height,
'position': 'absolute',
'top': starty,
'left': startx,
'background': bcolor,
'transform': 'rotate(' + angle + 'deg)',
'transform-origin': '0 0'
});
return oPointer;
}
return this;
}
})(jQuery);
</script>
<script type="text/javascript">
$(function(){
$('#clock').drawClock();
});
</script>
</head>
<body>
<div id="clock"></div>
</body>
</html>
演示图：
以上所述就是本文的全部内容了，希望大家能够喜欢。
