Find file
Fetching contributors…
Cannot retrieve contributors at this time
81 lines (77 sloc) 3.58 KB
<title>Analog Clock</title>
function updateTime() { // Update the SVG clock graphic to show current time
var now = new Date(); // Current time
var min = now.getMinutes(); // Minutes
var hour = (now.getHours() % 12) + min/60; // Fractional hours
var minangle = min*6; // 6 degrees per minute
var hourangle = hour*30; // 30 degrees per hour
// Get SVG elements for the hands of the clock
var minhand = document.getElementById("minutehand");
var hourhand = document.getElementById("hourhand");
// Set an SVG attribute on them to move them around the clock face
minhand.setAttribute("transform", "rotate(" + minangle + ",50,50)");
hourhand.setAttribute("transform", "rotate(" + hourangle + ",50,50)");
// Update the clock again in 1 minute
setTimeout(updateTime, 60000);
/* These CSS styles all apply to the SVG elements defined below */
#clock { /* styles for everything in the clock */
stroke: black; /* black lines */
stroke-linecap: round; /* with rounded ends */
fill: #eef; /* on a light blue gray background */
#face { stroke-width: 3px;} /* clock face outline */
#ticks { stroke-width: 2; } /* lines that mark each hour */
#hourhand {stroke-width: 5px;} /* wide hour hand */
#minutehand {stroke-width: 3px;} /* narrow minute hand */
#numbers { /* how to draw the numbers */
font-family: sans-serif; font-size: 7pt; font-weight: bold;
text-anchor: middle; stroke: none; fill: black;
<body onload="updateTime()">
<!-- viewBox is coordinate system, width and height are on-screen size -->
<svg id="clock" viewBox="0 0 100 100" width="500" height="500">
<defs> <!-- Define a filter for drop-shadows -->
<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" />
<feMergeNode in="SourceGraphic"/><feMergeNode in="shadow"/>
<circle id="face" cx="50" cy="50" r="45"/> <!-- the clock face -->
<g id="ticks"> <!-- 12 hour tick marks -->
<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 id="numbers"> <!-- Number the cardinal directions-->
<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>
<!-- Draw hands pointing straight up. We rotate them in the code. -->
<g id="hands" filter="url(#shadow)"> <!-- Add shadows to the hands -->
<line id="hourhand" x1="50" y1="50" x2="50" y2="24"/>
<line id="minutehand" x1="50" y1="50" x2="50" y2="20"/>