473,394 Members | 1,699 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > javascript > questions > analog clock

Join Bytes to post your question to a community of 473,394 software developers and data experts.

Analog Clock

Frinavale
9,735 Expert Mod 8TB
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?

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.  
  5. <head>
  6.  <style type="text/css">
  7.   li{
  8.    position:absolute;
  9.    list-style:none;
  10.    text-align:center;
  11.    color:#CCCCCC;  
  12.   }
  13.  </style>
  14. </head>
  15. <body>
  16.  
  17.  <ul>
  18.   <li>12</li>
  19.   <li> . </li>
  20.   <li> . </li>
  21.   <li> . </li>
  22.   <li> . </li>
  23.   <li>1 </li>
  24.   <li> . </li>
  25.   <li> . </li>
  26.   <li> . </li>
  27.   <li> . </li>
  28.   <li>2 </li>
  29.   <li> . </li>
  30.   <li> . </li>
  31.   <li> . </li>
  32.   <li> . </li>
  33.   <li>3 </li>
  34.   <li> . </li>
  35.   <li> . </li>
  36.   <li> . </li>
  37.   <li> . </li>
  38.   <li>4 </li>
  39.   <li> . </li>
  40.   <li> . </li>
  41.   <li> . </li>
  42.   <li> . </li>
  43.   <li>5 </li>
  44.   <li> . </li>
  45.   <li> . </li>
  46.   <li> . </li>
  47.   <li> . </li>
  48.   <li>6 </li>
  49.   <li> . </li>
  50.   <li> . </li>
  51.   <li> . </li>
  52.   <li> . </li>
  53.   <li>7 </li>
  54.   <li> . </li>
  55.   <li> . </li>
  56.   <li> . </li>
  57.   <li> . </li>
  58.   <li>8 </li>
  59.   <li> . </li>
  60.   <li> . </li>
  61.   <li> . </li>
  62.   <li> . </li>
  63.   <li>9 </li>
  64.   <li> . </li>
  65.   <li> . </li>
  66.   <li> . </li>
  67.   <li> . </li>
  68.   <li>10</li>
  69.   <li> . </li>
  70.   <li> . </li>
  71.   <li> . </li>
  72.   <li> . </li>
  73.   <li>11</li>
  74.   <li> . </li>
  75.   <li> . </li>
  76.   <li> . </li>
  77.   <li> . </li>
  78.  </ul>
  79.  <div id="time" style="position:absolute; top:280px;"></div>
  80.  <script type="text/javascript">
  81.  
  82.  drawClock();
  83.  drawTime();
  84.  
  85.  
  86.  function drawTime(){
  87.   var listElements = document.getElementsByTagName("li");
  88.   for(var i=0; i<listElements.length; i++){
  89.    listElements[i].style.color="#CCCCCC";      
  90.    listElements[i].style.fontWeight="normal";
  91.    listElements[i].style.border="none";
  92.   }
  93.   var d = new Date();
  94.   var second = d.getSeconds();
  95.   var hour = d.getHours();
  96.   var minute = d.getMinutes();
  97.  
  98.   document.getElementById("time").innerHTML=hour+":"+minute+":"+second;
  99.   if(hour>12){hour -= 12;}
  100.   hour=hour*5;
  101.  
  102.   listElements[hour].style.color="blue";
  103.   listElements[hour].style.fontWeight="bold";
  104.   listElements[hour].style.border="solid 1px blue";
  105.   listElements[minute].style.color="green";
  106.   listElements[minute].style.fontWeight="bold";
  107.   listElements[minute].style.border="solid 1px green";
  108.   listElements[second].style.color="orange";
  109.   listElements[second].style.border="solid 1px orange";
  110.  
  111.  
  112.   setTimeout(drawTime,1000);
  113.  }
  114.  
  115.  function drawClock(){
  116.   var listElements = document.getElementsByTagName("li");
  117.   var step = (2*Math.PI)/listElements.length;
  118.   var angle=0;
  119.   //angle=180.60;//<--sets 12 to the 12 o'clock position ?? not sure why
  120.   var circleCenterX = 120;
  121.   var circleCenterY = 120;
  122.   var radius = 120;
  123.   for(var i = 0; i<listElements.length; i++)
  124.   { 
  125.     var element = listElements[i];
  126.     var left=Math.round(circleCenterX+radius*Math.cos(angle));
  127.     var top=Math.round(circleCenterY+radius*Math.sin(angle));
  128.     element.style.left = left+"px";
  129.     element.style.top = top+"px";
  130.     angle+=step;   
  131.   }
  132.  }
  133.  
  134.  </script>
  135. </body>
  136. </html>
Thanks!

-Frinny
Dec 16 '09 #1
7 4977
Dormilich
8,658 Expert Mod 8TB
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.
well, it works for me. (OK, if I use it in rad, aka 270° = 1.5*Math.PI)
Dec 16 '09 #2
Frinavale
9,735 Expert Mod 8TB
Thanks Dorm. Using 1.5*Math.PI properly set 12 at the 12 o'clock position.

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.  
  5. <head>
  6.  <style type="text/css">
  7.   li{
  8.    position:absolute;
  9.    list-style:none;
  10.    text-align:center;
  11.    color:#CCCCCC;  
  12.   }
  13.  </style>
  14. </head>
  15. <body>
  16.  
  17.  <ul>
  18.   <li>12</li>
  19.   <li> . </li>
  20.   <li> . </li>
  21.   <li> . </li>
  22.   <li> . </li>
  23.   <li>1 </li>
  24.   <li> . </li>
  25.   <li> . </li>
  26.   <li> . </li>
  27.   <li> . </li>
  28.   <li>2 </li>
  29.   <li> . </li>
  30.   <li> . </li>
  31.   <li> . </li>
  32.   <li> . </li>
  33.   <li>3 </li>
  34.   <li> . </li>
  35.   <li> . </li>
  36.   <li> . </li>
  37.   <li> . </li>
  38.   <li>4 </li>
  39.   <li> . </li>
  40.   <li> . </li>
  41.   <li> . </li>
  42.   <li> . </li>
  43.   <li>5 </li>
  44.   <li> . </li>
  45.   <li> . </li>
  46.   <li> . </li>
  47.   <li> . </li>
  48.   <li>6 </li>
  49.   <li> . </li>
  50.   <li> . </li>
  51.   <li> . </li>
  52.   <li> . </li>
  53.   <li>7 </li>
  54.   <li> . </li>
  55.   <li> . </li>
  56.   <li> . </li>
  57.   <li> . </li>
  58.   <li>8 </li>
  59.   <li> . </li>
  60.   <li> . </li>
  61.   <li> . </li>
  62.   <li> . </li>
  63.   <li>9 </li>
  64.   <li> . </li>
  65.   <li> . </li>
  66.   <li> . </li>
  67.   <li> . </li>
  68.   <li>10</li>
  69.   <li> . </li>
  70.   <li> . </li>
  71.   <li> . </li>
  72.   <li> . </li>
  73.   <li>11</li>
  74.   <li> . </li>
  75.   <li> . </li>
  76.   <li> . </li>
  77.   <li> . </li>
  78.  </ul>
  79.  <div id="time" style="position:absolute; top:280px;"></div>
  80.  <script type="text/javascript">
  81.  
  82.  drawClock();
  83.  drawTime();
  84.  
  85.  
  86.  function drawTime(){
  87.   var listElements = document.getElementsByTagName("li");
  88.   for(var i=0; i<listElements.length; i++){
  89.    listElements[i].style.color="#CCCCCC";      
  90.    listElements[i].style.fontWeight="normal";
  91.    listElements[i].style.border="none";
  92.   }
  93.   var d = new Date();
  94.   var second = d.getSeconds();
  95.   var hour = d.getHours();
  96.   var minute = d.getMinutes();
  97.  
  98.   document.getElementById("time").innerHTML=hour+":"+minute+":"+second;
  99.   if(hour>12){hour -= 12;}
  100.   hour=hour*5;
  101.  
  102.   listElements[hour].style.color="blue";
  103.   listElements[hour].style.fontWeight="bold";
  104.   listElements[hour].style.border="solid 1px blue";
  105.   listElements[minute].style.color="green";
  106.   listElements[minute].style.fontWeight="bold";
  107.   listElements[minute].style.border="solid 1px green";
  108.   listElements[second].style.color="orange";
  109.   listElements[second].style.border="solid 1px orange";
  110.  
  111.  
  112.   setTimeout(drawTime,1000);
  113.  }
  114.  
  115.  function drawClock(){
  116.   var listElements = document.getElementsByTagName("li");
  117.   var step = (2*Math.PI)/listElements.length;
  118.   var angle=1.5*Math.PI;
  119.   var circleCenterX = 120;
  120.   var circleCenterY = 120;
  121.   var radius = 120;
  122.   for(var i = 0; i<listElements.length; i++)
  123.   { 
  124.     var element = listElements[i];
  125.     var left=Math.round(circleCenterX+radius*Math.cos(angle));
  126.     var top=Math.round(circleCenterY+radius*Math.sin(angle));
  127.     element.style.left = left+"px";
  128.     element.style.top = top+"px";
  129.     angle+=step;   
  130.   }
  131.  }
  132.  
  133.  </script>
  134. </body>
  135. </html>

-Frinny
Dec 17 '09 #3
Dormilich
8,658 Expert Mod 8TB
mathematical note:
all trigonometric and exponential function use unit-less parameters by default.

in case of the circle, 2π represents the full circle (same as 360°).
reason: c = 2π·r, by dividing c by r (to make the circumference independent (and unit-less)) you get 2π for a full circle, always. q.e.d.

in case of exponential function you can argue, that the exponent is the number, a value is multiplied with itself and naturally this number (the repetition times) is unit-less.

extending trigonometric functions from exponential functions: complex numbers can be written either trigonometric or exponential style, which uses the angle as parameter.
r·cos(φ) + i·r·sin(φ) = r·exp(iφ)
thus, if the exponential style can’t use unit-bearing values, the trigonometric can’t either.
Dec 17 '09 #4
Frinavale
9,735 Expert Mod 8TB
Thanks for the refresher Dorm. I actually had to look up all of that stuff yesterday because it's been such a long time since I've used trig.

I think I might be getting closer to finding an answer to my original question: "how do you draw a line".

I think the answer might be to use the HTML5 canvas.

:)

-Frinny
Dec 17 '09 #5
Dormilich
8,658 Expert Mod 8TB
canvas seems like a good idea. JavaScript was not made for drawing to begin with. you may also think about using SVG graphics in XHTML.

SVG/HTML @ MDC
Dec 17 '09 #6
Frinavale
9,735 Expert Mod 8TB
*Sigh* Internet Explorer...
When will MS get their *stuff* together enough to keep up!
Whatever...I'm dedicating today to learning about the <canvas> and the rest of the new features offered in HTML 5.

I know JavaScript and HTML weren't actually supposed to be used for what I want to do (draw lines etc). I was toying with the idea of putting a whole bunch of <span>s or maybe some inner lists so that I could simulate drawing a line using these HTML elements....but I didn't like the idea. The other idea I had was to use images...but didn't like that idea either (my images would have to be angled properly and I don't think I have the graphics skills to do this using Paint or Gimp). So the <canvas> looks very appealing to me :)

-Frinny
Dec 17 '09 #7
Dormilich
8,658 Expert Mod 8TB
found a JS drawing library by chance:
High Performance JavaScript Vector Graphics Library

cross browser compatible, but not compareable to vector graphics.
Dec 18 '09 #8

Sign in to post your reply or Sign up for a free account.

Similar topics

3
System Clock
by: James Harriman | last post by:
Hi, I need to be able to measure a time interval in milliseconds on a windows machine. I have tried using time.clock() but it appears to measure time in seconds...Is there a way to measure time...
Python
0
Anyone have Analog code?
by: Robert Brewer | last post by:
Analog is a popular web log analyzer and report generator. I wrote a small Python helper for it today for my Dev Manager, looked for similar stuff via Google, and came up dry. Just curious if...
Python
33
clock() function
by: Pushkar Pradhan | last post by:
I'm using clock() to time parts of my code e.g. clk1 = clock(); /* code */ clk2 = clock(); /* calculate time in secs */ ...... clk1 = clock(); /* code */ clk2 = clock();
C / C++
54
Double Clock Experiment
by: CoreyWhite | last post by:
The following experiment is a demonstration of TIME TRAVEL. When writing this program, and testing it out I found that sometimes the program would engage itself in time travel but other times it...
C / C++
2
analog clock
by: cj | last post by:
Any body know a neat trick to put a analog clock on a form that would be updated by a timer? Far out in the uncharted backwaters of the unfashionable end of the Western Spiral arm of the Galaxy...
Visual Basic .NET
12
clock in javascript
by: cenktarhancenk | last post by:
is there a way to display a ticking clock in a web page using javascript? but not in a textbox, rather as text that i can change the style, font etc. cenk tarhan
Javascript
0
Ali Rizwan
Analog clock in VB6.0
by: Ali Rizwan | last post by:
Is any body knw how to make an analog clock in vb6.0 Thanks in Advance
Visual Basic 4 / 5 / 6
0
fayazmd
Analog Clock on Windows Form by Paint in C#.Net2003
by: fayazmd | last post by:
Hi, I am creating an analog clock on my form by paint method. By default it is displaying at top left corner of my form. i wanted to put that clock wherever i want, means i want to display that...
.NET Framework
6
Analog Clock Component required
by: Jerry Spence1 | last post by:
Strange request, but does anyone know of a conrol which is an analogue clock face. I don't want it to work like a clock, I just want to be able to grab the hands and set an alarm time for use in my...
Visual Basic .NET
0
How to turn on java script in a villaon keypad mobile phone
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
Java
0
Batch import of multiple excel files into the database
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
Data Management
0
Merging data from multiple Excel files
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
Data Management
0
BarryA
Navigating the Data Structures and Algorithms (DSA)
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
Algorithms / Advanced Math
1
Looking to do Android software development, any suggestions? Is flutter better?
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
General
1
Is that possible of reading the .csv file in column wise and the column have different lengths ?
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
C / C++
0
marktang
What is ONU?
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
General
0
Changing the language in Windows 10
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
Windows Server
0
jinu1996
Maximizing Business Potential: The Nexus of Website Design and Digital Marketing
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
Online Marketing

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!