一个使用svg做的动态时钟--svg clock

来源：互联网发布：flvcd硕鼠软件编辑：程序博客网时间：2024/04/25 01:55
怎么样很酷吧，以下是源码：
<!DOCTYPE html><html>    <title>SVG clock</title>            <meta http-equiv="content-type" content="text/html;charset=utf-8">        <meta name="viewport" content="width=device-width, initial-scale=1.0">    <!-- Bootstrap -->    <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">   <!-- <link rel="stylesheet" type="text/css" href="canvas.css" media="all" />-->    <style type="text/css">        #clock {                stroke: #adcd3c;            stroke-linecap: round;            fill: #f2fddb;        }        #face {            stroke-width: 3px;                    }        #ticks {            stroke-width: 2px;        }        #hands line {                            stroke-linejoin: bevel;                        }        #hourhand {            stroke-width: 4px;                                }        #minutehand {            stroke-width: 3px;                        }        #numbers {            font-size: 16px;            text-anchor: middle;            stroke: none;            fill:  #92b0dd;        }    </style>    <script type="text/javascript">        function updateTime() {            var now = new Date();            var second = now.getSeconds();            var min = now.getMinutes();            var hour = (now.getHours() % 12) + min / 60;            var secondangle = second * 6; //6 degrees for every minute            var minangle = min * 6;        //6 degrees for every minute            var hourangle = hour * 30;    //30 degrees for every hour                        var minhand = document.getElementById('minutehand');            var hourhand = document.getElementById('hourhand');                        var secondhand = document.getElementById('secondhand');            var shadhand = document.getElementById("shadow");            var clocks = document.getElementById("clock");            if(second%2==0){                //alert(clocks);                    clocks.style.stroke="#adcd3c";                }else{                    //alert(secondangle);                    clocks.style.stroke="#ad223c";            }                        minhand.setAttribute('transform', 'rotate(' + minangle + ', 50, 50)');            hourhand.setAttribute('transform', 'rotate(' + hourangle + ', 50, 50)');            secondhand.setAttribute('transform', 'rotate(' + secondangle + ', 50, 50)');            for (var i = shadhand.childElementCount - 1; i >= 0; i--) {            var chr = shadhand.children[i];                switch (chr.tagName)                            {                            case "feGaussianBlur":                            /*if(secondangle/2)==1){                              chr.setAttribute(dx=-1)                                }else{                                    chr.setAttribute(dx=1)                                }                              alert(chr.tagName);*/                              break;                            case "feOffset":                            if(second%2==0){                                //alert(secondangle);                                    chr.setAttribute("dx","-3");                                }else{                                    //alert(secondangle);                                    chr.setAttribute("dx","3");                                }                              //alert(chr.tagName);                              break;                            case "feMerge":                                /*for (var i = 0; i < chr.childElementCount -1; i++) {                                    chr.children[i].                                };*/                              //alert(chr.tagName);                              break;                            default:                              alert("could not found the Attribute");                            }            };            setTimeout(updateTime, 1000); //update time for every second        }    </script><body onload="updateTime()">    <svg id="clock" viewBox="0 0 100 100" width="500" height="500">        <defs>            <!-- define an filter use to add shadow of some element -->            <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">                <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur" />                <feOffset in="blur" dx="-1" dy="1" result="shadow" lighting-color = "#adcd3c"/>                <feMerge>                    <feMergeNode in="SourceGraphic"/>                    <feMergeNode in="shadow" />                </feMerge>            </filter>        </defs>        <!-- clock face -->        <circle id="face" cx="50" cy="50" r="45" />        <!-- mark time lines -->        <g id="ticks">            <line x1="50.00" y1="5.000" x2="50.00" y2="10.00" />            <line x1="72.50" y1="11.03" x2="70.00" y2="15.36" />            <line x1="88.97" y1="27.50" x2="84.64" y2="30.00" />            <line x1="95.00" y1="50.00" x2="90.00" y2="50.00" />            <line x1="88.97" y1="72.50" x2="84.64" y2="70.00" />            <line x1="72.50" y1="88.90" x2="70.00" y2="84.64" />            <line x1="50.00" y1="95.00" x2="50.00" y2="90.00" />            <line x1="27.50" y1="88.90" x2="30.00" y2="84.64" />            <line x1="11.03" y1="72.50" x2="15.36" y2="70.00" />            <line x1="5.000" y1="50.00" x2="10.00" y2="50.00" />            <line x1="11.03" y1="27.50" x2="15.36" y2="30.00" />            <line x1="27.50" y1="11.00" x2="30.00" y2="15.36" />        </g>        <!-- mark some important numbers -->        <g id="numbers">             <text x="50" y="20">12</text>            <text x="85" y="55">3</text>            <text x="50" y="88">6</text>            <text x="15" y="55">9</text>                    </g>        <!-- show hands -->        <g id="hands" filter="url(#shadow)">            <line id="hourhand" x1="50" y1="50" x2="50" y2="24" />            <line id="minutehand" x1="50" y1="50" x2="50" y2="20" />            <line id="secondhand" x1="50" y1="50" x2="50" y2="16" />        </g>            </svg></body></html>
0 0