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.
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.
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
function.js
The final step, create a JavaScript file named ‘function.js‘ and put the codes.
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.
0 Comments