<!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>
超酷的圆盘时钟表