Frontend Forever

Analog Clock Animation

About this Code

Hello reader, I am frontendforever. Nice to meet you again in this free code sharing website. In this post I am going to explain about Analog Clock Animation. If you are new to this website, we recommend you to subscribe to our youtube channel and watch the videos. Ok lets dive into the code.

Clock

A tool used to measure and tell time is a clock or timepiece. One of the earliest innovations made by humans is the clock, which satisfies the requirement to measure time intervals that are shorter than the natural units of a day, a lunar month, and a year. Over the centuries, various physical mechanisms have been utilized to power devices.

What is an analog clock?
An analog clock is a timepiece with hands that move and (typically) display the hours from 1 to 12 to indicate the time. Some timepieces display the time merely by the position and angle of the hands, while others use Roman numerals (I, II, III, etc.) or none at all.

Technical Review

In this example code we mainly used the setInterval function. setInterval function is already predefined by the browser clinet. so we dont need to worry about this. we only call the function as a callback with some optional and required parameters. The below content will explain more about he setInterval function

Syntax

setInterval(func, delay, arg0, arg1, /* ... ,*/ argN)

Parameters

func

A function to be executed every delay milliseconds. The first execution happens after delay milliseconds.

code

An optional syntax allows you to include a string instead of a function, which is compiled and executed every delay milliseconds. This syntax is not recommended for the same reasons that make using eval() a security risk.

delay (optional)

The time, in milliseconds (thousandths of a second), the timer should delay in between executions of the specified function or code. Defaults to 0 if not specified. See Delay restrictions below for details on the permitted range of delay values.

arg0, ..., argN (optional)

Additional arguments which are passed through to the function specified by func once the timer expires.

Images

These are the output images of the code. You can click on the image to enlarge it. also you can click the try it button to see the output.

Youtube Tutorial Video

If you are a visual learner and want to learn how to use this code, you can watch the video below.
and also this video contains the clear step by step explanation and the output of the code.

Source Code

This is the source code of the code. You can copy and paste the code to your editor.

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body{
  background: #e5e5e5;
  cursor: pointer;
}
.outerclock{
  width: 350px;
  height: 350px;
  background: #e5e5e5;
  border-radius: 50%;
  box-shadow:  6px 6px 8px gray,-6px -6px 8px white;
  position: relative;
  margin-top: 10%;
  margin-left: 35%;
}
.innerclock{
  width: 280px;
  height: 280px;
  background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url("https://www.frontendforever.com/uploads/assets/IMG-20200919-WA0000.jpg
");
  background-size: cover;
  border-radius: 50%;
  position: absolute;
  top: 10%;
  left: 10%;
}
.time p{
  font-size: 25px;
  font-weight: bold;
  font-family: Arial;
  text-shadow: 1px 1px 2px gray;
}
.time p:nth-child(1){
  position: absolute;
  left: 44%;
  top: -20%;
}
.time p:nth-child(2){
  position: absolute;
  left: -8%;
  top: 36%;
}
.time p:nth-child(3){
  position: absolute;
  left: 48%;
  bottom: -20%;
}
.time p:nth-child(4){
  position: absolute;
  right: -8%;
  top: 36%;
}
#dot{
  width: 20px;
  height: 20px;
  background:black;
  border-radius: 50%; 
  position: absolute;
  top: 46%;
  left: 46%;
  z-index: 4;
}
#hour{
  width: 10px;
  height: 75px;
  background: #00E5FF;
  position: absolute;
  top: 24%;
  left: 47%;
  border-radius: 50% 50% 0px 0px;
  transform-origin: bottom;
  z-index: 2;
}
#min{
  width: 8px;
  height: 110px;
  background: yellow;
  position: absolute;
  top: 11%;
  left: 47%;
  border-radius: 50% 50% 0px 0px;
  transform-origin: bottom;
  z-index: 1;
}
#sec{
  width: 5px;
  height: 120px;
  background: red;
  position: absolute;
  top: 8%;
  left: 48%;
  transform-origin: bottom;
  z-index: 3;
}

And also you can click the try it button to see the output of the code in our web Code Playground.
You can also download the code to the zip format by clicking the download button. The download process is little bit complex, you need ti await for 10 seconds. after that you can download the code by clicking the generated download link.

Download

Try It

Frontend Forever

Analog Clock Animation

About this Code

Clock

What is an analog clock?

Technical Review

Syntax

Parameters

Images

Youtube Tutorial Video

Source Code

Leave a Comment

You need to login first to comment.

About Us

Frontend Forever