This whole thing started when I wanted to display list items in a circle...it just looked way too much like a clock. So for fun I started to create a JavaScript Analog clock.
I was wondering how to draw a line using JavaScript. Everything I've found so far seems to use some JavaScript library....is there an easier way to do this?
Here's what I have so far. I know the clock is Side Ways....but when I try to change the angle so that 12 is at the top (by setting it to -90 or 270 since it's in the 3 o'clock position) it isn't right. Maybe my math is wrong or something?
Thanks!
-Frinny
I was wondering how to draw a line using JavaScript. Everything I've found so far seems to use some JavaScript library....is there an easier way to do this?
Here's what I have so far. I know the clock is Side Ways....but when I try to change the angle so that 12 is at the top (by setting it to -90 or 270 since it's in the 3 o'clock position) it isn't right. Maybe my math is wrong or something?
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
li{
position:absolute;
list-style:none;
text-align:center;
color:#CCCCCC;
}
</style>
</head>
<body>
<ul>
<li>12</li>
<li> . </li>
<li> . </li>
<li> . </li>
<li> . </li>
<li>1 </li>
<li> . </li>
<li> . </li>
<li> . </li>
<li> . </li>
<li>2 </li>
<li> . </li>
<li> . </li>
<li> . </li>
<li> . </li>
<li>3 </li>
<li> . </li>
<li> . </li>
<li> . </li>
<li> . </li>
<li>4 </li>
<li> . </li>
<li> . </li>
<li> . </li>
<li> . </li>
<li>5 </li>
<li> . </li>
<li> . </li>
<li> . </li>
<li> . </li>
<li>6 </li>
<li> . </li>
<li> . </li>
<li> . </li>
<li> . </li>
<li>7 </li>
<li> . </li>
<li> . </li>
<li> . </li>
<li> . </li>
<li>8 </li>
<li> . </li>
<li> . </li>
<li> . </li>
<li> . </li>
<li>9 </li>
<li> . </li>
<li> . </li>
<li> . </li>
<li> . </li>
<li>10</li>
<li> . </li>
<li> . </li>
<li> . </li>
<li> . </li>
<li>11</li>
<li> . </li>
<li> . </li>
<li> . </li>
<li> . </li>
</ul>
<div id="time" style="position:absolute; top:280px;"></div>
<script type="text/javascript">
drawClock();
drawTime();
function drawTime(){
var listElements = document.getElementsByTagName("li");
for(var i=0; i<listElements.length; i++){
listElements[i].style.color="#CCCCCC";
listElements[i].style.fontWeight="normal";
listElements[i].style.border="none";
}
var d = new Date();
var second = d.getSeconds();
var hour = d.getHours();
var minute = d.getMinutes();
document.getElementById("time").innerHTML=hour+":"+minute+":"+second;
if(hour>12){hour -= 12;}
hour=hour*5;
listElements[hour].style.color="blue";
listElements[hour].style.fontWeight="bold";
listElements[hour].style.border="solid 1px blue";
listElements[minute].style.color="green";
listElements[minute].style.fontWeight="bold";
listElements[minute].style.border="solid 1px green";
listElements[second].style.color="orange";
listElements[second].style.border="solid 1px orange";
setTimeout(drawTime,1000);
}
function drawClock(){
var listElements = document.getElementsByTagName("li");
var step = (2*Math.PI)/listElements.length;
var angle=0;
//angle=180.60;//<--sets 12 to the 12 o'clock position ?? not sure why
var circleCenterX = 120;
var circleCenterY = 120;
var radius = 120;
for(var i = 0; i<listElements.length; i++)
{
var element = listElements[i];
var left=Math.round(circleCenterX+radius*Math.cos(angle));
var top=Math.round(circleCenterY+radius*Math.sin(angle));
element.style.left = left+"px";
element.style.top = top+"px";
angle+=step;
}
}
</script>
</body>
</html>
-Frinny
Comment