Digital Clock in JavaScript With Source Code

In JavaScript, Digital Clock is a web-based project which aims to provide (time features) to any development systems that can be useful in our daily living.

For example when you are creating a system for business the (time) features should be there to monitor time.

What is Digital Clock?

The Digital Clock In JavaScript is a simple web page clock that can be put to your system specially when you’re working with system with the main feature is the date and time.

For example, a DTR or (Daily Time Record) were time is one there basis for managing employees as well as in calculating there pay slip which they based on the time they work.

In addition, this clock using JavaScript can simply display hours and minute (hh mm ss) and has only a 12-hour format it can be greater than 12 unless you will reprogram the settimeout function in the code.

Project Details and Technology

Project Name:Digital Clock Code in JavaScript
AbstractThe Digital Clock Code in JavaScript time displayed on a digital clock is referred to as digital time. A 24-hour digital clock will display the time from 00.00 to 23:59.
Language/s Used:JavaScript
JavaScript version (Recommended):ES2015
Type:Web Application

Digital Clock Sample Output:

Digital Clock Source Code:

You can developed your one in a kind clock using only HTML, CSS and JavaScript. In addition the first thing to do when developing your own clock you should have to create a function and objects in JavaScript as well as date object and ternary operators.

The CSS (Cascading Style Sheet) can make the entire appearance of the clock more better which allows you to edit the background color to the entire body of HTML and text such sans serif.


<div id="MyClockDisplay" class="clock" onload="showTime()"></div>

<style type="text/css">

    body {

    background: black;


.clock {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translateX(-50%) translateY(-50%);

    color: #17D4FE;

    font-size: 60px;

    font-family: Orbitron;

    letter-spacing: 7px;



<script type="text/javascript">

    function showTime(){

    var date = new Date();

    var h = date.getHours(); // 0 - 23

    var m = date.getMinutes(); // 0 - 59

    var s = date.getSeconds(); // 0 - 59

    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("MyClockDisplay").innerText = time;

    document.getElementById("MyClockDisplay").textContent = time;    

    setTimeout(showTime, 1000);  




How Digital Clock works?

The Digital Clock works by utilizing the time base to count off the seconds and maintain the time accurately rather than a pendulum or an oscillating wheel.

Digital clocks use a (counter) in place of gears, and, of course, the face of the clock uses an LED or LCD to display the numbers instead of hands and a painted surface.

How are an analog clock and a digital clock different?

Analogue watches and clocks show the time using mechanical structures like a dial and hands, while digital watches and clocks use electronic structures like a liquid crystal and LED to show the time (number display type).

Importance of Digital Clock?

The importance of digital clock is it easy to look for a time because it display specifically all the details of it like seconds, minutes and hours.

In addition, Digital Clock has many features that can be really useful it provides a better readability during intense time, and also it helps people track the time with an ease or else for students which is very helpful to there class schedule.


The Digital clocks are better than analog clocks because they have more features.

Digital clocks are easier to read when time is of the essence, and some digital models have a countdown timer that can help people keep track of the time. They can help students get from one class to the next on time.

About the Project

This system is a straightforward project that was developed using the HTML and CSS platform and was written in the JavaScript programming language. Because of this project, users will the ability to see time seamlessly.

To begin constructing the Digital Clock Code in JavaScript, make sure you have any platform for creating JavaScript, bootstrap, and HTML installed on your computer; in my instance, I’ll be using Sublime Text.

You can also watch tutorial of JavaScript about Alarm Clock Using Python With Source Code Free Download 2022.

How to make digital clock in JavaScript : Procedure to run the system

Time needed: 3 minutes

How to make digital clock in JavaScript : Procedure to run the system

  • Step 1: Download Source Code

    To get started, find the downloaded source code file below and click to start downloading it.
    download Digital Clock Code in JavaScript

  • Step 2: Extract File

    Navigate to the file’s location when you’ve finished downloading it and right-click it to extract it.
    Digital Clock Code in JavaScript extract

  • Step 3: Run the project

    click the index.html inside the folder to start executing the project.
    Digital Clock Code in JavaScript index

Download Source Code below


For those Web developers interested in learning more about web apps, this project is a fully functional project.


If you have any questions or comments on this project, please leave a comment below.

Leave a Comment