How To Get Live Time In Javascript

In this blog post, we will learn how to get the live time using JavaScript and display it on a webpage. This can be useful for various purposes like displaying a live clock on your website or keeping track of time-sensitive actions.

Step 1: Create an HTML element to display the time

First, we need to create an HTML element that will be used to display the live time. In this example, we will create a div element with the ID live-time.

<div id="live-time"></div>

Step 2: Write a JavaScript function to get the current time

Now, let’s create a JavaScript function that will get the current time and format it as a string. We will use the Date object to get the current date and time, and extract the hours, minutes, and seconds from it.

function getCurrentTime() {
    const now = new Date();
    const hours = now.getHours();
    const minutes = now.getMinutes();
    const seconds = now.getSeconds();

    return `${hours}:${minutes}:${seconds}`;
}

However, this function will display the hours, minutes, and seconds without leading zeros (e.g., 5:3:9 instead of 05:03:09). To fix this, let’s add a helper function that will add a leading zero to numbers less than 10:

function padNumber(number) {
    return number < 10 ? '0' + number : number;
}

Now, we can update our getCurrentTime() function to use the padNumber() function:

function getCurrentTime() {
    const now = new Date();
    const hours = padNumber(now.getHours());
    const minutes = padNumber(now.getMinutes());
    const seconds = padNumber(now.getSeconds());

    return `${hours}:${minutes}:${seconds}`;
}

Step 3: Update the HTML element with the current time

Next, we need to create a function that will update the text content of the live-time element with the current time:

function displayLiveTime() {
    const liveTimeElement = document.getElementById('live-time');
    liveTimeElement.textContent = getCurrentTime();
}

Step 4: Update the time every second

Finally, we need to call the displayLiveTime() function every second to keep the time updated. We can use the setInterval() function to achieve this:

setInterval(displayLiveTime, 1000);

Now, the live time should be displayed on your webpage and updated every second.

Complete Example

Here’s the complete HTML, CSS, and JavaScript code for this example:

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Live Time Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
    </style>



<div id="live-time"></div>

<script>
    function padNumber(number) {
        return number < 10 ? '0' + number : number;
    }

    function getCurrentTime() {
        const now = new Date();
        const hours = padNumber(now.getHours());
        const minutes = padNumber(now.getMinutes());
        const seconds = padNumber(now.getSeconds());

        return `${hours}:${minutes}:${seconds}`;
    }

    function displayLiveTime() {
        const liveTimeElement = document.getElementById('live-time');
        liveTimeElement.textContent = getCurrentTime();
    }

    setInterval(displayLiveTime, 1000);
</script>

And that’s it! Now you know how to get the live time in JavaScript and display it on a webpage. You can further customize the appearance by adding CSS styles or modify the JavaScript code to add additional features.