Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE HTML>
- <html>
- <head>
- <title>Analog Clock</title>
- <script>
- function updateTime() {
- var now = new Date();
- var min = now.getMinutes();
- var hour = (now.getHours() % 12) + min/60;
- var minangle = min*6;
- var hourangle = hour*30;
- var minhand = document.getElementById("minutehand");
- var hourhand = document.getElementById("hourhand");
- minhand.setAttribute("transform", "rotate(" + minangle + ",50,50)");
- hourhand.setAttribute("transform", "rotate(" + hourangle + ",50,50)");
- setTimeout(updateTime, 60000);
- }
- </script>
- <style>
- #clock {
- stroke: black;
- stroke-linecap: round;
- fill: #eef;
- }
- #face { stroke-width: 3px;}
- #ticks { stroke-width: 2; }
- #hourhand {stroke-width: 5px;}
- #minutehand {stroke-width: 3px;}
- #numbers {
- font-family: sans-serif; font-size: 7pt; font-weight: bold;
- text-anchor: middle; stroke: none; fill: black;
- }
- </style>
- </head>
- <body onload="updateTime()">
- <svg id="clock" viewBox="0 0 100 100" width="500" height="500">
- <defs> <!-- Einen Filter fu ̈r Schlagschatten definieren. -->
- <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
- <feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur" />
- <feOffset in="blur" dx="1" dy="1" result="shadow" />
- <feMerge>
- <feMergeNode in="SourceGraphic"/><feMergeNode in="shadow"/>
- </feMerge>
- </filter>
- </defs>
- <circle id="face" cx="50" cy="50" r="45"/>
- <g id="ticks">
- <line x1='50' 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.97' 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.97' 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.03' x2='30.00' y2='15.36'/>
- </g>
- <g id="numbers">
- <text x="50" y="18">12</text><text x="85" y="53">3</text>
- <text x="50" y="88">6</text><text x="15" y="53">9</text>
- </g>
- <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"/>
- </g>
- </svg>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement