This is the 23rd day of my participation in Gwen Challenge
In this article, you’ll learn how to make analog clocks using HTML, CSS, and JavaScript programming code. Here I will show you how to make a simple analog clock.
If you want to see how the watch works, you can watch a live demo below. Of course, I’ve put the necessary source code there, and if you wish, you can copy them to apply your own learning and work. However, if you are a beginner and want to know how I made this watch, you must follow the tutorial below.
First, you must create an HTML and CSS file before extending the watch. Merge HTML files and CSS files. You can also add CSS code to an HTML file using style tags (CSS Code).
Step 1: Create the basic structure for making this clock
I created the basic structure using the following HTML code. The HTML below has been used to make the watch, which is basically the dial you see in the watch.
<div id='clock'>
<! -- clock number (1,2,.... 12) -- - >
<! -- Clock pointer ()-->
</div>
Copy the codeStep 2: Design the background using CSS code
The following CSS code has been used to design the above HTML code. Added a background color and a border to the watch. In this case, I used white in the watch to see the hands and numbers more clearly. As you can see in the image below, I show what can be achieved by adding these two programming codes.
body {
background: rgb(13.186.230);
color: # 333;
margin-top: 50px;
font-family: Helvetica, sans-serif;
}
#clock {
background: #fff;
border: 15px solid # 222;
border-radius: 50%;
position: relative;
width: 320px;
height: 320px;
margin: auto;
}
Copy the code
Step 3: Design the background using CSS code
Above we have basically designed the background of the watch. At the same time, we’ll add up the numbers from 1 to 12. Basically, we rely on these numbers to check the time. In this case, I added numbers from 1 to 12 through HTML programming code. I use the span tag (1,…. 12) wrote the numbers.
<ul class='hours'>
<li>
<span>
1
</span>
</li>
<li>
<span>
2
</span>
</li>
<li>
<span>
3
</span>
</li>
<li>
<span>
4
</span>
</li>
<li>
<span>
5
</span>
</li>
<li>
<span>
6
</span>
</li>
<li>
<span>
7
</span>
</li>
<li>
<span>
8
</span>
</li>
<li>
<span>
9
</span>
</li>
<li>
<span>
10
</span>
</li>
<li>
<span>
11
</span>
</li>
<li>
<span>
12
</span>
</li>
</ul>
Copy the codeStep 4: Sort the numbers by a specific distance
As you saw above, the HTML code writes these numbers. Now we will design the numbers and arrange them in the specified distance. In many cases, a lot of people use background images to not write these numbers. Here, I’ve nicely arranged the numbers using nTH-of-type () CSS code.
Now the question that’s probably in your mind is how I arranged the numbers in exactly specific distances. Let me tell you — I measure the distance in degrees. We all know that if we measure a circle in degrees, its size is 360 degrees. If we divide 360 by 12, the value for each Angle will be 30.
This means that if you place each number at a distance of 30 degrees, the number 12 will find its position at a perfectly fixed distance in the circular frame. As shown below, I rotated the first number by 30 degrees. We use the same number 2 by rotating it at an Angle of 60 degrees.
ul {
list-style: none;
top: 0;
margin: 0;
padding: 0;
position: absolute;
text-align: center;
}
li {
position: absolute;
transform-origin: 50% 100%;
height: 160px;
}
.hours {
left: 120px;
font-size: 23.3333333333 px.;
letter-spacing: -1.6 px.;
line-height: 45px;
}
.hours li {
width: 80px;
}
.hours span {
display: block;
}
/* The following code helps to design the number 1*/
.hours li:nth-of-type(1) {
transform: rotate(30deg);
}
.hours li:nth-of-type(1) span {
transform: rotate(-30deg);
}
.hours li:nth-of-type(2) {
transform: rotate(60deg);
}
.hours li:nth-of-type(2) span {
transform: rotate(-60deg);
}
/* The following code helps to design the number 3*/
.hours li:nth-of-type(3) {
transform: rotate(90deg);
}
.hours li:nth-of-type(3) span {
transform: rotate(-90deg);
}
.hours li:nth-of-type(4) {
transform: rotate(120deg);
}
.hours li:nth-of-type(4) span {
transform: rotate(-120deg);
}
/* The following code helps to design the number 5*/
.hours li:nth-of-type(5) {
transform: rotate(150deg);
}
.hours li:nth-of-type(5) span {
transform: rotate(-150deg);
}
.hours li:nth-of-type(6) {
transform: rotate(180deg);
}
.hours li:nth-of-type(6) span {
transform: rotate(-180deg);
}
/* The following code helps to design the number 7*/
.hours li:nth-of-type(7) {
transform: rotate(210deg);
}
.hours li:nth-of-type(7) span {
transform: rotate(-210deg);
}
.hours li:nth-of-type(8) {
transform: rotate(240deg);
}
.hours li:nth-of-type(8) span {
transform: rotate(-240deg);
}
/* The following code helps to design the number 9 */
.hours li:nth-of-type(9) {
transform: rotate(270deg);
}
.hours li:nth-of-type(9) span {
transform: rotate(-270deg);
}
.hours li:nth-of-type(10) {
transform: rotate(300deg);
}
.hours li:nth-of-type(10) span {
transform: rotate(-300deg);
}
/* The following code helps to design the number 11*/
.hours li:nth-of-type(11) {
transform: rotate(330deg);
}
.hours li:nth-of-type(11) span {
transform: rotate(-330deg);
}
.hours li:nth-of-type(12) {
transform: rotate(360deg);
}
.hours li:nth-of-type(12) span {
transform: rotate(-360deg);
}
Copy the code
Step 5: Add three hands (hour, minute, second) to the clock
At this point, we have completed the basic design of the watch. Now we will add three Pointers to the watch. When we set some time, we set it to hours, minutes, and seconds. So in this case, I’ll also use three hands to create the following HTML programming code.
<div class='hr-wrapper'>
<div class='hand hr'></div>
</div>
<div class='min-wrapper'>
<div class='hand min'></div>
</div>
<div class='sec-wrapper'>
<div class='hand sec'></div>
</div>
Copy the codeStep 6: Position each hand
I used the following CSS, I only designed the hour hand. The problem now may be how these hands rotate regularly.
Let me tell you something – if you look at your CSS, you’ll understand that the position of these hands on one side is absolute. As a result, that direction remains perfectly stable and the other side continues to spin.
.hr-wrapper..min-wrapper..sec-wrapper {
position: absolute;
width: 320px;
height: 320px;
}
.hand {
position: absolute;
bottom: 50%;
transform-origin: 50% 100%;
}
.hr {
background: # 222;
left: 152px;
width: 13px;
height: 105px;
border-radius: 10px;
animation: rotateHand 43200s linear infinite;
}
.hr:after {
background: # 222;
border-radius: 50%;
content: "";
display: block;
position: absolute;
bottom: -8px;
width: 13px;
height: 16px;
}
Copy the code
I use the following code to design the minute hand. Let me tell you one thing, if you want to increase the length and height of these incisions, you can do it easily.
.min {
background: # 222;
left: 155px;
width: 9px;
height: 125px;
border-radius: 8px;
animation: rotateHand 3600s linear infinite;
}
.min:after {
background: # 222;
border-radius: 50%;
content: "";
display: block;
position: absolute;
bottom: -8px;
width: 9px;
height: 16px;
}
Copy the code
I have used the following code for second-hand design. You’ll notice that I’ve instructed here to rotate the second hand using @keyframes rotateHand.
.sec {
background: #d00;
left: 156.5 px.;
width: 5px;
height: 132px;
border-radius: 8px;
animation: rotateHand 60s linear infinite;
}
.sec:after {
background: #d00;
border-radius: 50%;
content: "";
display: block;
position: absolute;
bottom: -3.5 px.;
width: 5px;
height: 7px;
}
@keyframes rotateHand {
to {
transform: rotate(1turn); }}Copy the code
Step 7: Add JavaScript code to activate the clock
So far, we’ve only designed it. Now we will activate the watch.
// Get the current time
var dateInfo = new Date(a);var hr = dateInfo.getHours() > 12 ? dateInfo.getHours() - 12 : dateInfo.getHours(),
min = dateInfo.getMinutes(),
sec = dateInfo.getSeconds(),
milsec = dateInfo.getMilliseconds();
Copy the code
Step 8: Determine the rotation of the manual clock
I told you before that the hands on the watch are partly fixed and partly rotated. This rotation will be controlled by JavaScript code.
As I said before, one hour is equal to 30 degrees (1 hr = 30°), one minute is equal to 6 degrees (1 min = 6°), and one second is equal to 6 degrees (1 SEC = 6°).
I will manually multiply the current clock by 30 to rotate the clock’s cut according to the specified time. Suppose we increase the number of minutes to keep the clock hands in a cleaner and more precise position. For example, if I tell you that if the clock is currently at 03:30, then by rule the hour hand will be at 90 degrees. In this case, the exact time is never displayed. Because we know that at 03:30, the clock’s hands will be somewhere between 3 and 4. That means the pointer will be slightly above 90 degrees.
To determine this, we added the distance from hour to minute hands. So that the hands of the clock are in the right place. I have indicated the same minute and second hand rotation method. If you know basic JavaScript programming code, hopefully you can understand this design.
var hrAngle = hr * 30 + (min * 6 / 12),
minAngle = min * 6 + (sec * 6 / 60),
secAngle = sec * 6 + (milsec * 0.36 / 1000);
// Set the initial Angle of the hand wrapper
function setAngle(wrapper, angle) {
document.querySelector("." + wrapper).style.transform = "rotate(" + angle + "deg)";
}
setAngle("hr-wrapper", hrAngle);
setAngle("min-wrapper", minAngle);
setAngle("sec-wrapper", secAngle);
Copy the codeHopefully, you’ve learned how to make this clock using HTML, CSS, and JavaScript code. The second type of clock at the top will be detailed in my next article
The code download
Concern public number free download
Pay attention to wechat public number [la la la want biu point what] reply [clock] free access
Contact the author
I’ve been writing tech blogs for a long time and this is one of my tech posts/tutorials. Hope you like it! More relevant articles and my contact information are listed here:
Github.com/wanghao221 gitee.com/haiyongcsdn…
If you really learn something new from this article, like it, bookmark it and share it with your friends. 🤗 and finally, don’t forget ❤ or 📑