<!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>
