September 8, 2021

How to Get Unix Timestamp in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to get unix timestamp in javascript. The Unix timestamp is a total number of seconds that have elapsed since January 1st, 1970 at UTC.

The UTC stands for coordinated universal time and it remains the same for everyone no matter where you are in the world. That is why it’s extremely easy for computer systems to convert UTC to your local time.

There are 2 common ways to get Unix timestamp in javascript. One is using Date constructor and another one is by using Date object. However, they return milliseconds instead of seconds so we need to divide the returned value by 1000 to convert it into seconds. We are going to use both of them one by one.

In the following example, we simply want to display Unix timestamp upon click of a button. Please have a look over the code example and steps given below.

HTML & CSS

We have 3 elements in the HTML file and that includes div, button, and h1 elements.
The div element is just a wrapper for the rest of the elements.
The inner text for the button element is “Get” and for the h1 button, it is “Result”.

We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    
    <div>
        <button>Get</button>
        <h1>Result</h1>
    </div>
    
    <script src="script.js"></script>
</body>
</html>

div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

button{
    padding: 10px 20px;
    margin-top: 10px;
}

Javascript

We have selected both the elements button and h1 using document.querySelector() and stored them in btnGet and result variables respectively.
We have attached the click event listener to the button element.

Date Constructor

In the event handler function, we are using the Date constructor and calling the getTime() method. This getTime() method returns timestamp in milliseconds and we are storing it in currentTimestamp variable.
We are converting it into seconds by dividing it by 1000 and avoiding any decimals by passing it as a parameter to the Math.floor() method.

Date Object

In the event handler function, we are using the Date object and calling now() method. This now() method returns timestamp in milliseconds and we are storing it in currentTimestamp variable.
We are converting it into seconds by dividing it by 1000 and avoiding any decimals by passing it as a parameter to the Math.floor() method.

let btnGet = document.querySelector('button');
let result = document.querySelector('h1');

btnGet.addEventListener('click', () =>{

    // let currentTimestamp = new Date().getTime();

    let currentTimestamp = Date.now();

    result.innerText = Math.floor(currentTimestamp/1000);
})

You May Also Like: