- Setting up the Date() and time functions and variables.
So I set the variable time to hold my new Date() object. Getting the time and date information is just as easy. Use the time.get method to get the specific information you need. Set those to variables you can easily remember for later. NOTE: the year variable has the method getFullYear(); this is important because then we get the year 2019. If we used the getYear(); function we would get the last 3 digits of the year plus 100 so the result would be 119. This would be used to find the last two or three digits of the year like here: 01/01/19.
If you are confused by this line of code don’t be alarmed its just a very simple if statement just compressed into 1 line of code.
It is structured like this: (Is hour more than 12?), and the question mark is the sign we use to show the computer that this is a IF statement (If the answer is YES the left side of the colon is True, and if it is FALSE the right side of the colon is True.) We then add the hour to it.
So, in short this if statement finds if hour is less than 12, then finds out if it needs to make _12Hours = 0 or do nothing then add hour to _12Hours to make it a 12 hour time calculation.
Now we must format the time to make a number look like this: 06 instead of 6, and we just use another if statement. So that your time is formatted to look like this 06:03:09 instead of the wonky 6:3:9.
So now we have the time and date formatted in the right way.
2. Get PM or AM And Set Up the Time Variables As A String.
It is easy to get the Pm or Am just do a simple if statement to see if the hour variable less than 12 or not.
Setting up the string that will show the time on screen is just as easy.
Now our time looks like this when printed to the screen: 06:22:32 PM.
We can then populate a container with our time string by retrieving this child text node then setting its nodeValue property.
3. Setting up the HTML of the webpage.
Here we are just setting up a super simple HTML webpage named Clock with an external CSS style sheet called “Div-style.css“.
Now we are going to unload the functions of our JS file into the body of the webpage.
So we import updateClock(); function we set it to update with setInterval(); every second.
Now we set up the DIVs of the webpage to hold the content for us. Think of a DIV as a piece of paper that you pin to the wall, and the wall is your webpage.
I used id in the Div to name it so we don’t lose track of which one does what. The content tag holds everything as a foundation. The Numbers DIV holds the time and the Clock Face id holds the animated clock we will make in a few minutes. In the Clock Face DIV I set up a canvas to hold the information for my clock that I’m about to animate. We use Non-breaking space or   so that this DIV isn’t affected by word wrap. Its just a habit for me to do this every-time I make a <canvas> or <span>.
REMEMBER CLOSE YOUR TAGS WITH A SLASH </body>, </head>,</html>
4. Creating and Animating a Clock Face.
- Make a Canvas
- Get the context (ctx) of the canvas you can name this whatever you like.
- Now we get the radius of the canvas we just made and use that as the radius of our circle for the clock face
- Now we draw the clock every second so it can update with setInterval();.
Now we draw the clock.
- Make the drawClock(); function.
- And populate it with functions we will use to draw the clock.
And now we are going to set up those functions
Very simply we are drawing the Circle of the clock and making it a gradient gray. Then we fill it with a white circle to make a white colored background on the clock.
This is simply making numbers using a loop 1 – 12 and putting them in the right place. every 30 degrees on the circle of the clock.
Now to draw the hands of the clock
Simply updating the lines that we will draw on the program. by a determined angle every hour, minute, and second.
Now to set up the drawing of the Lines that act as hands.
Finally we are drawing lines and finding the position, length and width of them from the drawTime() function above.
And that’s the end of the animated clock. Easy right? Now we just add the clockDraw() function to the HTML and we have it done.
You can now edit the CSS to your hearts content. Here is mine just so you have a reference of what I have done to mine
Check out my GitHub for the files to this project. Play with them to your hearts content. Improve them if you want! One of the best ways to improve is to fix someone else’s projects and play with them.
Direct Link: GitHub for this project!