标签：javascript jquery html5 css3
<!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type"
content="text/html; charset=utf-8"
/><title>超酷数码钟表</title><script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript">//引用的是在线jquery地址，如果不行请自行下载切换(function($){ $.fn.drawClock =
function(options){ var
mainId = $(this); //设置默认参数 var
defaultOptions = { ‘width‘:
‘300px‘, ‘height‘:
‘300px‘, ‘margin‘:
‘200px auto‘, ‘border‘:
‘1px solid #888‘, ‘border-radius‘:
‘50%‘, ‘box-shadow‘:
‘2px 2px 4px #111‘ }; var
options = $.extend(defaultOptions, options); mainId.css({ ‘width‘: options.width,
‘height‘: options.height,
‘margin‘: options.margin, ‘border‘: options.border, ‘border-radius‘: options[‘border-radius‘], ‘box-shadow‘: options[‘box-shadow‘],
‘position‘:
‘relative‘ }).css({ ‘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 closest-side, #ffe 0%, #eee 100%)‘ }); //钟表盘中心圆 $("<div id=‘circle‘></div>").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<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>标签：javascript jquery html5 css3
原文地址：http://blog.csdn.net/zl_jay/article/details/38534045
