VMLclock
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title></title>
<meta name="Generator" content="EditPlus" />
<meta name="Author" content="eglic" />
<meta name="ContentType" content="text/html" />
<meta name="CharSet" content="GB2312" />
<link rel="stylesheet" type="text/css" href="/style/default.css" />
<style type="text/css">
v\:* {behavior:url(#default#VML);}
#clockcontainer {width:300px;height:300px;border:solid 1px;padding:0px;margin:0px;}
</style>
</head>
<body>
<div id="clockcontainer">
<v:group id="group1" style="position:relative;width:300px;height:300px;" coordsize = "300,300">
<v:oval style="position:relative;left:0;top:0;width:300;height:300">
</v:oval>
<v:line style="position:relative;left:0px;top:0px;" from="150,150" to="150,150" strokeweight="4px" id="hour">
<v:stroke EndArrow="Classic" dashstyle="Solid" />
</v:line>
<v:line style="position:relative;left:0px;top:0px;" from="150,150" to="150,150" strokeweight="2px" id="minute">
<v:stroke EndArrow="Classic" dashstyle="ShortDash" />
</v:line>
<v:line style="position:relative;left:0px;top:0px;" from="150,150" to="150,150" id="second">
<v:stroke EndArrow="Classic" dashstyle="ShortDash" />
</v:line>
</v:group>
</div>
<script>
var hourWidth = 90;
var minuteWidth = 120;
var secondWidth = 140;
setInterval(clock , 1000);
function clock() {
var date = new Date();
var h = date.getHours() % 12 / 12 * 100;
var m = date.getMinutes() / 60 * 100;
var s = date.getSeconds() / 60 * 100;
var r = getArr(new Array(h , m , s));
setPos(document.getElementById('hour') , r[0] * hourWidth , r[1] * hourWidth);
setPos(document.getElementById('minute') , r[2] * minuteWidth , r[3] * minuteWidth);
setPos(document.getElementById('second') , r[4] * secondWidth , r[5] * secondWidth);
}
function setPos(node , x , y ) {
node.setAttribute('to' , (150 + x) + "," + (150 + y));
}
function getArr(r) {
var s = [];
for(var i = 0 ; i < r.length ; i++) {
if(r[i] >= 0 && r[i] < 25) {
s.push(Math.abs(Math.sin(2 * Math.PI * r[i] / 100)));
s.push(-1 * Math.abs(Math.cos(2 * Math.PI * r[i] / 100)));
} else if(r[i] >= 25 && r[i] < 50) {
s.push(Math.abs(Math.sin(2 * Math.PI * r[i] / 100)));
s.push(Math.abs(Math.cos(2 * Math.PI * r[i] / 100)));
} else if(r[i] >= 50 && r[i] < 75) {
s.push(-1 * Math.abs(Math.sin(2 * Math.PI * r[i] / 100)));
s.push(Math.abs(Math.cos(2 * Math.PI * r[i] / 100)));
} else {
s.push(-1 * Math.abs(Math.sin(2 * Math.PI * r[i] / 100)));
s.push(-1 * Math.abs(Math.cos(2 * Math.PI * r[i] / 100)));
}
}
return s;
}
</script>
</body>
</html>