VMLclock - 闲谈- JavaEye技术网站企业库|免费b2b网站

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