topical media & game development
graphic-javascript-vector-polar-clock.htm / htm
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Polar Clock</title>
<script src="graphic-javascript-vector-raphael.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
window.onload = function () {
var r = Raphael("holder", 600, 600),
R = 200,
param = {stroke: "#fff", "stroke-width": 30, "stroke-linecap": "butt"},
html = [
document.getElementById("h"),
document.getElementById("m"),
document.getElementById("s"),
document.getElementById("d"),
document.getElementById("mnth"),
document.getElementById("ampm")
];
// r.image("raphael-white-bg.png", 140, 140, 320, 320).attr({opacity: .5});
var sec = r.path(param).moveTo(300, 300 - R).arcTo(R, R, 0, 1, 300, 300 - R);
R = 160;
var min = r.path(param).moveTo(300, 300 - R).arcTo(R, R, 0, 1, 300, 300 - R);
R = 120;
var hor = r.path(param).moveTo(300, 300 - R).arcTo(R, R, 0, 1, 300, 300 - R);
R = 80;
var day = r.path(param).moveTo(300, 300 - R).arcTo(R, R, 0, 1, 300, 300 - R);
R = 40;
var mon = r.path(param).moveTo(300, 300 - R).arcTo(R, R, 0, 1, 300, 300 - R);
var pm = r.circle(300, 300, 15).attr({stroke: "none", fill: Raphael.hsb2rgb(15 / 200, 1, .75).hex});
html[5].style.color = Raphael.hsb2rgb(15 / 200, 1, .75).hex;
function updateVal(value, total, R, hand, id) {
var alpha = 360 / total * value,
a = (90 - alpha) * Math.PI / 180,
x = 300 + R * Math.cos(a),
y = 300 - R * Math.sin(a),
color = Raphael.hsb2rgb(R / 200, value / total, .75).hex;
hand.path[1].arg[2] = (alpha > 180 ? 1 : 0);
hand.path[1].arg[4] = x;
hand.path[1].arg[5] = y;
hand.redraw().attr({stroke: color});
html[id].innerHTML = (value < 10 ? "0" : "") + value;
html[id].style.color = color;
}
(function () {
var d = new Date();
var am = (d.getHours() < 12);
var h = d.getHours() % 12 || 12;
updateVal(d.getSeconds(), 60, 200, sec, 2);
updateVal(d.getMinutes(), 60, 160, min, 1);
updateVal(h, 12, 120, hor, 0);
updateVal(d.getDate(), 31, 80, day, 3);
updateVal(d.getMonth() + 1, 12, 40, mon, 4);
pm[(am ? "hide" : "show")]();
html[5].innerHTML = am ? "AM" : "PM";
r.safari();
setTimeout(arguments.callee, 1000);
})();
};
</script>
<style type="text/css" media="screen">
body {
background: #000;
color: #fff;
text-align: center;
font-family: "Lucida Grande", Lucida, Verdana, Helvetica, sans-serif;
}
#holder {
height: 600px;
left: 50%;
margin: -300px 0 0 -300px;
position: absolute;
top: 50%;
width: 600px;
}
</style>
</head>
<body>
<div id="holder"></div>
<div id="time">
<span id="h"></span>:<span id="m"></span>:<span id="s"></span> <span id="ampm"></span> ยท <span id="d"></span>/<span id="mnth"></span>
</div>
</body>
</html>
(C) Æliens
20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.
