How to Build a Analog Clock using HTML
CSS and JavaScript
As you can see in the picture, this is a Simple Clock utilizing HTML CSS and Javascript. This is an ongoing clock, not a sham. You can find the clock program, yet you will get most CSS stuff. Simply a vector of the clock. Be that as it may, I'm sharing a live clock, what capabilities as work in javascript.
Video Tutorial of Analog Clock
Build a Analog Clock [Source Codes]
To Build a Analog Clock with HTML,CSS and JavaScript, follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be style and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source code by clicking download button.
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>Clock</title>
- <link rel="stylesheet" href="style.css">
- <style id="clock-animate"></style>
- </head>
- <body>
- <div class="clock">
- <div class="center-nut"></div>
- <div class="center-nut2"></div>
- <div class="indicator">
- <div>
- </div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- </div>
- <div class="sec-hand"></div>
- <div class="min-hand"></div>
- <div class="hr-hand"></div>
- </div>
- <script src="script.js"></script>
- </body>
- </html>
Now paste the following codes into your style.css file
- *{
- margin: 0;
- padding: 0;
- }
- body {
- position: relative;
- display: flex;
- align-items: center;
- justify-content: center;
- min-height: 100vh;
- background-image: url('bg.jpg');
- background-size: cover;
- }
-
- body::before {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-color: rgba(0, 0, 0, 0.7);
- }
-
- .clock{
- position: relative;
- display: flex;
- justify-content: center;
- align-items: center;
- width: 250px;
- height: 250px;
- background: #CFD0D0;
- border-radius: 50%;
- border: 16px solid #303030;
- box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.9);
- }
- .clock:before{
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- content: '';
- width: 259px;
- height: 259px;
- border: 6px solid #202020;
- border-radius: 50%;
- box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
- }
- .clock:after{
- position: absolute;
- content: '';
- height: 150px;
- width: 150px;
- border-radius: 50%;
- background: #59c3ff;
- z-index: 1;
- }
- .center-nut,.center-nut2{
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- border-radius: 50%;
- }
- .center-nut{
- height: 15px;
- width: 15px;
- background: #262626;
- z-index: 2;
- }
- .center-nut2{
- width: 9px;
- height: 9px;
- background: red;
- z-index: 6;
- }
- .indicator div{
- position: absolute;
- width: 2px;
- height: 5px;
- background: #404040;
- }
- .indicator div:nth-child(1) {
- transform: rotate(30deg) translateY(-113px);
- }
- .indicator div:nth-child(2) {
- transform: rotate(60deg) translateY(-113px);
- }
- .indicator div:nth-child(3) {
- transform: rotate(90deg) translateY(-113px);
- background: red;
- }
- .indicator div:nth-child(4) {
- transform: rotate(120deg) translateY(-113px);
- }
- .indicator div:nth-child(5) {
- transform: rotate(150deg) translateY(-113px);
- }
- .indicator div:nth-child(6) {
- transform: rotate(180deg) translateY(-113px);
- background: red;
- }
- .indicator div:nth-child(7) {
- transform: rotate(210deg) translateY(-113px);
- }
- .indicator div:nth-child(8) {
- transform: rotate(240deg) translateY(-113px);
- }
- .indicator div:nth-child(9) {
- transform: rotate(270deg) translateY(-113px);
- background: red;
- }
- .indicator div:nth-child(10) {
- transform: rotate(300deg) translateY(-113px);
- }
- .indicator div:nth-child(11) {
- transform: rotate(330deg) translateY(-113px);
- }
- .indicator div:nth-child(12) {
- transform: rotate(360deg) translateY(-113px);
- background: red;
- }
- .sec-hand{
- position: absolute;
- height: 1px;
- width: 1px;
- z-index: 5;
- animation: sec-hand 60s linear infinite;
- }
- .sec-hand:before{
- position: absolute;
- content: '';
- height: 130px;
- width: 3px;
- left: -1px;
- top: -25px;
- background: red;
- border-radius: 3px;
- }
- .sec-hand:after{
- position: absolute;
- content: '';
- height: 45px;
- width: 7px;
- left: -3px;
- top: -55px;
- background: red;
- border-radius: 3px;
- }
- .min-hand{
- position: absolute;
- height: 1px;
- width: 1px;
- z-index: 4;
- animation: min-hand 3600s linear infinite;
- }
- .min-hand:before{
- position: absolute;
- content: '';
- border-left: 3px solid transparent;
- border-right: 3px solid transparent;
- border-bottom: 70px solid #303030;
- left: -3px;
- top: -95px;
- width: 1px;
- height: 1px;
- }
- .min-hand:after{
- position: absolute;
- content: '';
- border-left: 2px solid transparent;
- border-right: 2px solid transparent;
- border-top: 25px solid #303030;
- left: -3px;
- top: -25px;
- width: 3px;
- height: 1px;
- }
- .hr-hand{
- position: absolute;
- height: 1px;
- width: 1px;
- z-index: 3;
- animation: hr-hand 43200s linear infinite;
- }
- .hr-hand:before{
- position: absolute;
- content: '';
- border-left: 3px solid transparent;
- border-right: 3px solid transparent;
- border-bottom: 55px solid #303030;
- left: -3px;
- top: -75px;
- width: 1px;
- height: 1px;
- }
- .hr-hand:after{
- position: absolute;
- content: '';
- border-left: 2px solid transparent;
- border-right: 2px solid transparent;
- border-top: 20px solid #303030;
- left: -3px;
- top: -20px;
- width: 3px;
- height: 1px;
- }
Now paste the following codes into your script.js file
-
- (function() {
- var time = new Date(), //we get this time from our pc time not from server
- second = time.getSeconds() / 60 * 360,
- minute = time.getMinutes() / 60 * 360 + time.getSeconds() / 60 *6,
- hour = time.getHours() / 12 * 360 + time.getMinutes() /60 * 30,
- animation = [
- "@keyframes sec-hand{from{transform: rotate(" + second + "deg);}to{transform: rotate(" + (second + 360) + "deg);}}",
- "@keyframes min-hand{from{transform: rotate(" + minute + "deg);}to{transform: rotate(" + (minute + 360) + "deg);}}",
- "@keyframes hr-hand{from{transform: rotate(" + hour + "deg);}to{transform: rotate(" + (hour + 360) + "deg);}}"
- ].join("");
- document.querySelector("#clock-animate").innerHTML = animation;
- })();
-
-
If you face any difficulties while creating a Analog Clock or your code is not working as expected, you can download the source code files by clicking download button.