Home Web Development JavaScript JavaScript Real Time Clock With HTML CSS | Get Time In JavaScript

JavaScript Real Time Clock With HTML CSS | Get Time In JavaScript

October 5, 2019

23193

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.

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.

<!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>

<!DOCTYPE html>

<head>

<title>Digital Clock In JavaScript</title>

</head>

<body>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/* 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;
}

/* 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.

// 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();

// 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.

6 COMMENTS

fazlen October 22, 2019 At 12:54 pm

why you’re usuing var? not let or const?

Reply
Adam Moore October 20, 2020 At 4:45 pm

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;
}

Reply
Adam Moore October 20, 2020 At 6:21 pm

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;
}
}

Reply
Abhi Patel January 16, 2021 At 1:09 pm

Awesome!!!!

Reply
Filip Moberg May 29, 2021 At 1:56 pm

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.

Reply
deepak chandel August 21, 2021 At 5:11 am

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.

Reply