VMLclock

java_mail_test

于 2010-04-11 20:44:42 发布

阅读量60

点赞数

文章标签： CSS Microsoft HTML

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