<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<html xmlns=
"http://www.w3.org/1999/xhtml"
>
<head>
<title></title>
<script src=
"jquery-1.7.1.min.js"
type=
"text/javascript"
></script>
<script type=
"text/javascript"
>
var
addRadian = Math.PI / 30;
var
wrapper = null;
var
minutes = 0;
var
hours = 0;
var
secondsLineLength = 14;
var
secondLineLength = 20;
function
cloneObj(obj1) {
var
tempObj = {};
for
(
var
i in obj1) {
if
(obj1.hasOwnProperty(i)) {
tempObj[i] = obj1[i];
}
}
return
tempObj;
}
function
createMinute(po, r, text) {
var
minute = [];
minute.push(
'<div class="minute" style="left:'
);
minute.push(po.x);
minute.push(
'px; top:'
);
minute.push(po.y);
minute.push(
'px;" >'
);
minute.push(text);
minute.push(
'</div>'
);
wrapper.append(minute.join(
''
));
}
function
createHour(po, r, text) {
var
minute = [];
minute.push(
'<div class="hour" style="left:'
);
minute.push(po.x);
minute.push(
'px; top:'
);
minute.push(po.y);
minute.push(
'px;" >'
);
minute.push(text);
minute.push(
'</div>'
);
wrapper.append(minute.join(
''
));
}
function
initSeconds(text, center, range) {
var
now_seconds =
new
Date
().getSeconds();
now_seconds = now_seconds > 0 ? now_seconds - 1 : 0;
for
(
var
i = 0; i < secondsLineLength + 1; i++) {
createFlower(center,
'●'
, range, (i + 1) * secondLineLength, Math.PI / 2 + (now_seconds) * addRadian, true, i == secondsLineLength ? true : false);
}
}
function
initMinutes(r, text, center) {
var
x = 0,
y = 0;
for
(
var
i = 0; i < 60; i++) {
x = center.x - Math.
cos
(Math.PI / 2 + i * addRadian) * (r + secondLineLength);
y = center.y - Math.sin(Math.PI / 2 + i * addRadian) * (r + secondLineLength);
createMinute({x: x,y: y}, r, text);
}
minutes =
new
Date
().getMinutes();
waldedMinute(minutes);
}
function
initHours(r, text, center) {
var
x = 0,
y = 0;
for
(
var
i = 0; i < 60; i+=5) {
x = center.x - Math.
cos
(Math.PI / 2 + i * addRadian) * (r + secondLineLength);
y = center.y - Math.sin(Math.PI / 2 + i * addRadian) * (r + secondLineLength);
createHour({ x: x, y: y }, r, text);
}
hours =
new
Date
().getHours();
waldedHour(hours);
}
function
waldedMinute(index) {
var
index = Math.
floor
((index % 60)) > 0 ? Math.
floor
((index % 60)) + 1 : 0;
wrapper.find(
".minute:lt("
+ index +
")"
).css(
'color'
,
"green"
);
if
(index > 0) {
wrapper.find(
".minute:eq(0)"
).css(
'color'
,
'#DDDDDD'
);
}
}
function
waldedHour(index) {
var
index = Math.
floor
((index%12)) > 0 ? Math.
floor
((index%12)) + 1:0;
wrapper.find(
".hour:lt("
+ index +
")"
).css(
'color'
,
"green"
);
if
(index > 0) {
wrapper.find(
".hour:eq(0)"
).css(
'color'
,
'#494949'
);
}
}
function
animation(obj, r, radian, range, center, text, last) {
logNowTime();
radian += addRadian;
var
x = center.x - Math.
cos
(radian) * r;
var
y = center.y - Math.sin(radian) * r;
obj.css({
"left"
: x,
"top"
: y });
if
(last && radian > Math.PI * 5 / 2 - 0.1) {
radian = Math.PI / 2;
minutes++;
if
(minutes < 60) {
}
else
{
if
(minutes % 60 == 0) {
hours++;
if
(hours % 12 != 0) {
}
else
{
wrapper.find(
".hour"
).css(
'color'
,
"#494949"
);
}
waldedHour(hours);
}
else
{
wrapper.find(
".minute"
).css(
'color'
,
"#DDDDDD"
);
}
}
waldedMinute(minutes);
}
setTimeout(
function
() {
animation(obj, r, radian, range, center, text, last);
}, 1000);
}
function
createFlower(center, text, range, r, radian, autoAnimate, last) {
var
flower = [];
flower.push(
'<div class="second"'
);
flower.push(
' style="left:'
);
flower.push(center.x);
flower.push(
'px; top:'
);
flower.push(center.y);
flower.push(
'px;'
);
flower.push(autoAnimate ?
'" >'
:
'color:red;" >'
);
flower.push(text);
flower.push(
'</div>'
);
flower = $(flower.join(
''
));
flower.appendTo(wrapper);
if
(autoAnimate) {
animation(flower, r, radian, range, center, text, last);
}
}
function
logNowTime() {
var
date
=
new
Date
(),
hour =
date
.getHours(),
minute =
date
.getMinutes(),
second =
date
.getSeconds();
hour = hour < 10 ?
"0"
+ hour : hour;
minute = minute < 10 ?
"0"
+ minute : minute;
second = second < 10 ?
"0"
+ second : second;
$(
"#time"
).html(
"当前时间-"
+ hour +
":"
+ minute +
":"
+ second);
}
$(document).ready(
function
() {
wrapper = $(
"#wrapper"
),
width = wrapper.width(),
height = wrapper.height(),
offLeft = parseInt(wrapper.offset().left),
range = {
x: offLeft,
y: 0,
x1: offLeft + width,
y1: height
},
center = {
x: Math.
round
(width / 2) + offLeft,
y: Math.
round
(height / 2)
};
initHours(secondLineLength * secondsLineLength + 40,
'●'
, center);
initMinutes(secondLineLength * secondsLineLength + 20,
'●'
, center);
initSeconds(
'●'
, center, range);
});
</script>
<style type=
"text/css"
>
body { margin:0; padding:0; }
#wrapper { margin:0 auto; width:1000px; height:780px; background:black; }
.second { width:12px; height:12px; position:absolute; text-shadow:1px 1px 1px green; color:Green; }
.minute { color:#DDDDDD; position:absolute;}
.hour { color:#494949; position:absolute;}
#time { font-size:30px; line-height:30px; text-shadow:2px 2px 2px green; text-align:center; }
</style>
</head>
<body>
<div id=
"time"
></div>
<div id=
"wrapper"
>
</div>
</body>
</html>