![]()
<!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>
