jquery+html5制作超酷的圆盘时钟表_jquery
程序员文章站
2022-04-08 18:29:21
...
自己封装的一个用HTML5+jQuery写的时钟表
").appendTo(mainId).css({
'width': '20px',
'height': '20px',
'border-radius': '50%',
'box-shadow': '0 0 5px rgba(0,0,0,0.8)',
'position': 'absolute',
'z-index': 999,
'background': '-webkit-gradient(radial, ' + mainId.width()/2 + ' ' + mainId.height()/2 + ', 0, ' + mainId.width()/2 + ' ' + mainId.height()/2 + ', ' + mainId.width()/2 + ', from(#ffe), to(#eee))',
'background': '-moz-radial-gradient(circle, #eee 30%, #ffe 100%)'
}).css({
'left': mainId.width()/2 - $('#circle').width()/2,
'top': mainId.height()/2 - $('#circle').height()/2
});
var dateTime = new Date();
var oHours = dateTime.getHours();
var oMinutes = dateTime.getMinutes();
var oSeconds = dateTime.getSeconds();
//初始化时分秒
var hPointer = drawPointer(mainId.width()/2, mainId.height()/2, mainId.width()/2*(3/6), 5, "#333", -90+oHours*30+oMinutes*6/12);
var mPointer = drawPointer(mainId.width()/2, mainId.height()/2, mainId.width()/2*(4/6), 4, "#666", -90+oMinutes*6);
var sPointer = drawPointer(mainId.width()/2, mainId.height()/2, mainId.width()/2*(5/6), 3, "#f00", -90+oSeconds*6);
//运动时分秒
var timer = setInterval(function(){
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
代码：
超酷数码钟表