Javascript analog countdown script

Discussion in 'Web Design and Development' started by Génicus, Aug 25, 2009.

  1. Génicus macrumors member

    Joined:
    Feb 18, 2009
    Location:
    Belgium
    #1
    Hello, I am looking for a javascript that can put hours, minutes and seconds in a analog clock form. I have a javascript that produces this numbers, but I don't have a clue how to put them into a clock...
    Can somebody help me please?
    Thanks in advance
     
  2. mason.kramer macrumors 6502

    mason.kramer

    Joined:
    Apr 16, 2007
    Location:
    Watertown, MA
    #2
    Do you know how to program? Let's assume you do. (Because if you don't, what the heck are you doing here? :))

    There's nothing to "know" about doing this, really. You have a fixed background which is the clock face. You have hands that move according to what time is. The angle (call it theta) of the minute hand is related to the minutes of the hour by the formula theta = x*6, where is the x number of minutes. The hour hand theta is more complicated but let's just think through it right now. 12 hours in the unit circle = 360/12 degrees per hour, or 30°. theta = 30*h + 30*(minutes/60).

    Now decide how you are going to display the hands as they tick around. You can use Flash (or possibly HTML) to display the image of a clock hand which is rotated theta degrees. 3D css transforms are only supported in the most recent browsers, but can also be used. I don't think timing the display of many many copies of the same rotated image is at all advisable.
     
  3. Génicus thread starter macrumors member

    Joined:
    Feb 18, 2009
    Location:
    Belgium
    #3
    I can program in Pascal, I know a little bit of php, css, html, but javascript is new for me; although I want to learn it as soon as possible for this project.
     
  4. mason.kramer macrumors 6502

    mason.kramer

    Joined:
    Apr 16, 2007
    Location:
    Watertown, MA
    #4
    Alright, well what I've just posted should get you started. At this point it's a web graphics problem: you need to pick a method for display rotated images. There might be a javascript framework such as scriptaculous that can do rotations, in which case that is the preferred method.
     
  5. Génicus thread starter macrumors member

    Joined:
    Feb 18, 2009
    Location:
    Belgium
    #5
    and where can I find that framework? I currently am making my background and stuff
     
  6. Génicus thread starter macrumors member

    Joined:
    Feb 18, 2009
    Location:
    Belgium
    #6
    okay... I really have to read your posts better :-/
     

Share This Page