天天看点
返回

一个简单的svg时钟

一个简单的svg时钟
<!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>
</head>
<body οnlοad="updataTime()">
   <div style="width:350px;height:300px;border:groove 2px black;position:relative;">
        <div style="width:200px;height:200px;position:absolute;top:30px;left:20px;">
            <svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" >
	<g>
	  <circle id="circle" style="stroke: black; fill: #f8f8f8;" cx="100" cy="100" r="100"/>
	  <line id="hour0" x1="100" y1="10"  x2="100" y2="0"/>
	  <line id="hour1" x1="150" y1="13"  x2="145" y2="22"/>
	  <line id="hour2" x1="187" y1="50"  x2="178" y2="55"/>
	  <line id="hour3" x1="190" y1="100" x2="200" y2="100"/>
	  <line id="hour4" x1="187" y1="150" x2="178" y2="145"/>
	  <line id="hour5" x1="150" y1="187" x2="145" y2="178"/>
	  <line id="hour6" x1="100" y1="190" x2="100" y2="200"/>
	  <line id="hour7" x1="50"  y1="187" x2="55"  y2="178"/>
	  <line id="hour8" x1="13"  y1="150" x2="22"  y2="145"/>
	  <line id="hour9" x1="0"   y1="100" x2="10"  y2="100"/>
	  <line id="hour10" x1="13"  y1="50"  x2="22"  y2="55" />
	  <line id="hour11" x1="50"  y1="13"  x2="55"  y2="22" />
	</g>
	<g>
	  <line x1="100" y1="100" x2="100" y2="45" style="stroke-width: 6px; stroke: green;" id="hourhand"/>
	  <line x1="100" y1="100" x2="100" y2="15" style="stroke-width: 4px; stroke: blue;"  id="minutehand"/>
	  <line x1="100" y1="100" x2="100" y2="5"  style="stroke-width: 2px; stroke: red;"   id="secondhand"/>
	</g>
      </svg>
       </div>
        <div style="width:90px;height:90px;border:groove 2px black;position:absolute;top:30px;right:20px;"></div>
        <div style="width:90px;height:90px;border:groove 2px black;position:absolute;top:140px;right:20px;"></div>
        <div id="header1"  style=" position:absolute;top:250px;right:60px;"></div>
   </div>
</body>
</html>
           
<script type="text/javascript">
    setInterval("header1.innerHTML=new Date().toLocaleString()", 1000);
</script>

<style>
  /* any custom styles live here */
  line {
  stroke-width: 3px;
  stroke: black;
  }      
</style>
<script>
    var CLOCK = (function () {
        var drawClock = function () {
            var r = 100;
            // Draw Circle
            var circle = document.getElementById("circle");
            circle.setAttribute('r', r);
            circle.setAttribute('cx', r);
            circle.setAttribute('cy', r);

            // Draw Hours
            for (var i = 0; i < 12; i++) {
                var hour = document.getElementById("hour" + i);
                var degrees = i * 30;
                hour.setAttribute('x1', getX(degrees, r, 0.9)); // 90% of radio's length.
                hour.setAttribute('y1', getY(degrees, r, 0.9)); // 90% of radio's length.
                hour.setAttribute('x2', getX(degrees, r));
                hour.setAttribute('y2', getY(degrees, r));
            }

            // Draw hands
            drawHands();
        };

        var drawHands = function () {
            // Constants for hand's sizes.
            var SECONDS_HAND_SIZE = 0.95,
	MINUTES_HAND_SIZE = 0.85,
	HOURS_HAND_SIZE = 0.55;

            var circle = document.getElementById("circle");

            // Clock Circle's Properties
            var r = circle.getAttribute('r'),
	cx = parseInt(circle.getAttribute('cx')),
	cy = parseInt(circle.getAttribute('cy'));

            // Current time.
            var currentTime = new Date();

            // Draw Hands
            drawHand(document.getElementById("secondhand"),
		 currentTime.getSeconds(),
		 SECONDS_HAND_SIZE,
		 6);
            drawHand(document.getElementById("minutehand"),
		 currentTime.getMinutes(),
		 MINUTES_HAND_SIZE,
		 6);
            drawHand(document.getElementById("hourhand"),
		 currentTime.getHours(),
		 HOURS_HAND_SIZE,
		 30);

            function drawHand(hand, value, size, degrees) {
                var deg = degrees * value;
                x2 = getX(deg, r, size, cx),
	    y2 = getY(deg, r, size, cy);

                hand.setAttribute('x1', cx);
                hand.setAttribute('y1', cy);
                hand.setAttribute('x2', x2);
                hand.setAttribute('y2', y2);
            }
        };


        function getX(degrees, r, adjust, x) {
            var x = x || r,
	adj = adjust || 1;
            return x + r * adj * Math.cos(getRad(degrees));
        }


        function getY(degrees, r, adjust, y) {
            var y = y || r,
	adj = adjust || 1;
            return y + r * adj * Math.sin(getRad(degrees));
        }


        function getRad(degrees) {
            var adjust = Math.PI / 2;
            return (degrees * Math.PI / 180) - adjust;
        }

        return {
            init: function () {
                drawClock();
                setInterval(drawHands, 1000);
            },
            zoom: function () {
                drawClock();
            }
        };
    })();
    CLOCK.init();
</script>
svg
上一篇: DialogFragment实现带数字倒计时和小圆点进度的圆形进度条DialogFragment实现带数字倒计时和小圆点进度的圆形进度条
下一篇: 电脑罗盘时钟代码_教小朋友用Mixly制作一个GPS时钟

继续阅读