How we can get the time and create a simple clock using JavaScript? Solution: See this JavaScript Real Time Clock With HTML CSS, Get Time In JavaScript.
Earlier I have shared a JavaScript analog clock, but this is digital clock means it shows time in number format. Basically, JavaScript gets real time from your device and show it on the webpage. And this post is about how JavaScript get the time and show with some basics styles. And the get date program can be used un multiple paces in the website.
Today you will learn to create Get Time In JavaScript. Basically there is a realtime digital clock, means you can see time in number with hour, minutes, and second. And the clock run normally you don’t have to refresh the webpage to see updated time. There is just time in numbers format and am pm indicator.
So, Today I am sharing JavaScript Real Time Clock With HTML CSS. There I have used HTML CSS and pure JavaScript for creating the program, I have not used any library. With any library, you can show time by just putting a single line of code. You can use this program for creating many types of program like countdown timer, age calculator, and many more.
If you are thinking now how this digital clock actually is, then see the preview given below.
Preview Get Time In JS
See this video preview to getting an idea about how it looks like.
Live Demo
Now you can see this visually, you also can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
- Registration Form With Validation
- JavaScript Loop Slideshow
- Highlight Current Page With JS
- HTML CSS JavaScript Calendar
JavaScript Real Time Clock With HTML CSS Source Code
Before sharing source code, let’s talk about it. First I have created a single div using HTML and put an ID name, a class, and a function name in onLoad. It looks like this: <div id="ID" class="clock" onload="showTime()"></div> I have created the function showTime in the JavaScript file, and called here in HTML div.
Now using I have little bit styled the text, as you can see in the preview. Here I have used a Google font for styling the number and text, linked the font (get) in the HTML file. With CSS I just gave font style, color, size, etc basic things. JavaScript is the main thing in this program. JS fetching the time from your device and stored in variables, using date.get-* command.
Now it’s checking for AM or PM and it’s automatically refreshing the program in 1 second, that’s why you don’t have to refresh the page for getting updated time. Left other basics things you will understand after getting the codes, I can’t explain in writing. For creating this program you have to create 3 files, First for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this program without any error.
index.html
Create an HTML 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 |
<!DOCTYPE html> <!--Code By Webdevtrick ( https://webdevtrick.com )--> <html lang="en" > <head> <meta charset="UTF-8"> <title>Digital Clock In JavaScript</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Righteous&display=swap" rel="stylesheet"> <link rel="stylesheet" href="./style.css"> </head> <body> <div id="DigitalCLOCK" class="clock" onload="showTime()"></div> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ body { background: #212121; } .clock { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); color: #ff4747; font-size: 60px; font-family: 'Righteous', cursive; letter-spacing: 7px; } |
function.js
The final step, create a JavaScript file named ‘function.js‘ and put the 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 |
// Code By Webdevtrick ( https://webdevtrick.com ) function showTime(){ var date = new Date(); var h = date.getHours(); var m = date.getMinutes(); var s = date.getSeconds(); var session = "AM"; if(h == 0){ h = 12; } if(h > 12){ h = h - 12; session = "PM"; } h = (h < 10) ? "0" + h : h; m = (m < 10) ? "0" + m : m; s = (s < 10) ? "0" + s : s; var time = h + ":" + m + ":" + s + " " + session; document.getElementById("DigitalCLOCK").innerText = time; document.getElementById("DigitalCLOCK").textContent = time; setTimeout(showTime, 1000); } showTime(); |
That’s It. Now you have successfully created JavaScript Real Time Clock With HTML CSS, Get Time In JavaScript. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
why you’re usuing var? not let or const?
I noticed this bit of code will report 12:00 PM (Noon) as AM, since the if statement to change the session is checking if “h” is greater than 12.
if(h == 0){
h = 12;
}
if(h > 12){
h = h – 12;
session = “PM”;
}
I did the following to correctly report 12 noon as PM.
if (h => 12) {
session = “PM”;
}
if (h == 0){
h = 12;
}
else if (h > 12){
h = h – 12;
}
The RTC reports 12 PM (noon) as AM, this is because the if statement to change the session to PM is checking if “h” (hours) is greater than “12”.
I posted the incorrect code before, the code below should work if anyone needs it.
var session;
if (h 12){
session = “PM”;
if (h > 12) {
h = h – 12;
}
}
Awesome!!!!
Hello!
I’m just wondering if there’s anyway to add other time zones. I just want to make a website were I can quickly check what time it is for my internet friends.
Very Bad ! Just describe us how to use these code in wordpress for one page without losing theme show. Because i have used code but theme losing design.