Clock Program In JavaScript, HTML, & CSS With Source Code. In this article, You will learn how to make a clock using HTML, CSS, and JavaScript. This is a real-time clock, not a dummy. You can find the clock program, but you will get mostly just CSS stuff. Just vector of the clock.
I had previously shared a calculator program in JavaScript, & this time is for clock. You can say JS is the heart of any web page in other words, without JavaScript a web page just is a dead body. We can create so many basic to advanced program using only javascript ( without any JS libraries ).
Today I am sharing a live clock, which functions is work in JavaScript. I had already shared many programs in JavaScript, that you can find in this blog. This real-time clock program is possible with JavaScript’s Date() function. Basically, this date function gets date and time from your currently using system.
Preview Of This Clock
Before sharing source code let’s see a preview of this clock.
You Also May Like:
Source Code Of Clock Program in JavaScript, HTML, & CSS
Now time to share source code with you guys. I had created 3 files for this program first for HTML, second for CSS, & third for JavaScript. Whole layout is built-in HTML & CSS. And functions are in JavaScript. This is a fully working real-time or live clock.
index.html
Create a file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!DOCTYPE html> <!-- code by webdevtrick ( https://webdevtrick.com ) --> <html> <head> <meta charset="UTF-8"> <title>Real Time Clock Using HTML, CSS, & JavaScript</title> <link rel="stylesheet" href="style.css"> <style id="clock-animations"></style> </head> <body> <div class="clock-wrapper"> <div class="clock-base"> <div class="click-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="clock-hour"></div> <div class="clock-minute"></div> <div class="clock-second"></div> <div class="clock-center"></div> </div> </div> <script src="function.js"></script> </body> </html> |
style.css
Now create a file named ‘style.css‘ and paste these codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 |
/** code by webdevtrick ( https://webdevtrick.com ) **/ html,body{ height: 100%; margin: 0; padding: 0; background-color:cadetblue; } .clock-wrapper{ position: absolute; top: 50%; right: 0; bottom: 50%; left: 0; width: 250px; height: 250px; margin: auto; padding: 5px; background-color: #171A1D; border-radius: 50%; box-shadow: 0 10px 15px rgba(0,0,0,.15),0 2px 2px rgba(0,0,0,.2); } .clock-base{ width: 250px; height: 250px; background-color: #eee; border-radius: 50%; box-shadow: 0 0 5px #eee; } .click-indicator{ position: absolute; z-index: 1; top: 15px; left: 15px; width: 230px; height: 230px; } .click-indicator div{ position: absolute; width: 2px; height: 4px; margin: 113px 114px; background-color: black; } .click-indicator div:nth-child(1) { transform: rotate(30deg) translateY(-113px); } .click-indicator div:nth-child(2) { transform: rotate(60deg) translateY(-113px); } .click-indicator div:nth-child(3) { transform: rotate(90deg) translateY(-113px); background-color: red; } .click-indicator div:nth-child(4) { transform: rotate(120deg) translateY(-113px); } .click-indicator div:nth-child(5) { transform: rotate(150deg) translateY(-113px); } .click-indicator div:nth-child(6) { transform: rotate(180deg) translateY(-113px); background-color: red; } .click-indicator div:nth-child(7) { transform: rotate(210deg) translateY(-113px); } .click-indicator div:nth-child(8) { transform: rotate(240deg) translateY(-113px); } .click-indicator div:nth-child(9) { transform: rotate(270deg) translateY(-113px); background-color: red; } .click-indicator div:nth-child(10) { transform: rotate(300deg) translateY(-113px); } .click-indicator div:nth-child(11) { transform: rotate(330deg) translateY(-113px); } .click-indicator div:nth-child(12) { transform: rotate(360deg) translateY(-113px); background-color: red; } .clock-hour{ position: absolute; z-index: 2; top: 80px; left: 128px; width: 4px; height: 65px; background-color: #555; border-radius: 2px; box-shadow: 0 0 2px rgba(0,0,0,.2); transform-origin: 2px 50px; transition: .5s; animation: rotate-hour 43200s linear infinite; } .clock-minute{ position: absolute; z-index: 3; top: 60px; left: 128px; width: 4px; height: 85px; background-color: #555; border-radius: 2px; box-shadow: 0 0 2px rgba(0,0,0,.2); transform-origin: 2px 70px; transition: .5s; animation: rotate-minute 3600s linear infinite; } .clock-second{ position: absolute; z-index: 4; top: 20px; left: 129px; width: 2px; height: 130px; background-color: red; box-shadow: 0 0 2px rgba(0,0,0,.2); transform-origin: 1px 110px; transition: .5s; animation: rotate-second 60s linear infinite; } .clock-second:after{ content: ""; display: block; position: absolute; left: -5px; bottom: 14px; width: 8px; height: 8px; background-color: #a00; border: solid 2px #a00; border-radius: 50%; box-shadow: 0 0 3px rgba(0,0,0,.2); } .clock-center{ position: absolute; z-index: 1; width: 150px; height: 150px; top: 55px; left: 55px; background-color: #59C3FF; border-radius: 50%; box-shadow: inset 0 -1px 0 #fafafa, inset 0 1px 0 #e3e3e3; } .clock-center:after{ content: ""; display: block; width: 20px; height: 20px; margin: 65px; background-color: #ddd; border-radius: 50%; } |
function.js
Final thing, create a js file named ‘function.js‘ and put these codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/* code by webdevtrick ( https://webdevtrick.com ) */ (function(){ //generate clock animations var now = new Date(), hourDeg = now.getHours() / 12 * 360 + now.getMinutes() / 60 * 30, minuteDeg = now.getMinutes() / 60 * 360 + now.getSeconds() / 60 * 6, secondDeg = now.getSeconds() / 60 * 360, stylesDeg = [ "@-webkit-keyframes rotate-hour{from{transform:rotate(" + hourDeg + "deg);}to{transform:rotate(" + (hourDeg + 360) + "deg);}}", "@-webkit-keyframes rotate-minute{from{transform:rotate(" + minuteDeg + "deg);}to{transform:rotate(" + (minuteDeg + 360) + "deg);}}", "@-webkit-keyframes rotate-second{from{transform:rotate(" + secondDeg + "deg);}to{transform:rotate(" + (secondDeg + 360) + "deg);}}", "@-moz-keyframes rotate-hour{from{transform:rotate(" + hourDeg + "deg);}to{transform:rotate(" + (hourDeg + 360) + "deg);}}", "@-moz-keyframes rotate-minute{from{transform:rotate(" + minuteDeg + "deg);}to{transform:rotate(" + (minuteDeg + 360) + "deg);}}", "@-moz-keyframes rotate-second{from{transform:rotate(" + secondDeg + "deg);}to{transform:rotate(" + (secondDeg + 360) + "deg);}}" ].join(""); document.getElementById("clock-animations").innerHTML = stylesDeg; })(); |
That’s it. Now you have successfully created a live working clock with code. If you have any doubt or suggestion comment down below.
Thanks For Visiting, Keep Visiting.
