JS Dungeon Level2: Clock

Design Layout

Key Point

• Use natives Javascript getDate()
• Use natives Javascript setTimeout() or setInterval() to motivate movement of hour-hand/minute-hand/second-hand
• Use completely CSS skills to draw out whole design, or can use svg file instead.

Skills Used

• HTML5
• CSS3
• JavaScript

Step By Step

• Use HTML structure to separate each parts on the clock
  • clockBackground
    • clockBack
      • clockFace
      • hourHand
      • minuteHand
      • secondHand
• Use JS loop to distribute all the lines, dots, stars on the clockFace.
• Beware that there are 6 vacancies between each hour number.
• Therefore, when we do loop in JS, we need to take total 72 vacancies into consideration, instead of 60.
• Use setInterval() to set up time loop.
• Use getDate() to get current time.
• Apply getSeconds(), getMinutes(), getHours().

Demo

https://a7474267.github.io/JS-Dungeon-LV2/