HTML | DOM Video currentTime Property

Print current day and time using HTML and JavaScript

Last Updated : 30 Sep, 2024

Printing the current day and time using HTML and JavaScript involves dynamically displaying the present date and time on a webpage. JavaScript’s Date object is used to retrieve the current day, month, year, and time, which is then embedded in the HTML content.

Approach:

Retrieve Current Date and Day: Use the new Date() to get the current date and getDay() to retrieve the day’s index (0 for Sunday).
An array of Weekdays: Map the day’s index to a weekday array, which contains the names of the days, to display the correct day.
Get Time Components: Extract hours using getHours() and convert them to 12-hour format. Also, retrieve minutes using getMinutes().
AM/PM Determination: Determine whether it’s AM or PM using a conditional check, adjusting the hour if necessary for the 12-hour format.
Display Time and Day: Use document.write() to display the current day and formatted time, including the hour, minutes, and milliseconds.

Example: In this example we are following the above-explained approach.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        print current day and time
    </title>
</head>

<body>
    <script type="text/javascript">
        let myDate = new Date();
        let myDay = myDate.getDay();

        // Array of days. 
        let weekday = ['Sunday', 'Monday', 'Tuesday',
            'Wednesday', 'Thursday', 'Friday', 'Saturday'
        ];
        document.write("Today is : " + weekday[myDay]);
        document.write("<br/>");

        // get hour value. 
        let hours = myDate.getHours();
        let ampm = hours >= 12 ? 'PM' : 'AM';
        hours = hours % 12;
        hours = hours ? hours : 12;
        let minutes = myDate.getMinutes();
        minutes = minutes < 10 ? '0' + minutes : minutes;
        let myTime = hours + " " + ampm + " : " + minutes +
            " : " + myDate.getMilliseconds();
        document.write("\tCurrent time is : " + myTime); 
    </script>
</body>

</html>

Output:

time-and-date

current day and time using HTML and JavaScript Example Output

HTML | DOM Video currentTime Property

A

AnmolAgarwal

Improve

Article Tags :

Similar Reads

Birthday Reminder App using HTML, CSS, and JavaScript

Birthday reminder app helps us to track the upcoming birthdays of our loved ones so that we don't forget to celebrate them. In this tutorial, we will create a simple Birthday Reminder web app using the power of HTML, CSS, and JavaScript. This app allows users to add birthdays by adding names and bir

How to Inject Current Day and Time into HTML?

HTML allows us to embed dynamic content like the current day and time using JavaScript. By injecting real-time information into an HTML document, we can create interactive and user-friendly web pages. This process can be easily achieved using various methods, such as the <time> tag or JavaScri

Print the content of a div element using JavaScript

If you want to print the content of a <div> element using JavaScript, you can achieve this by extracting the content and then opening a new window or popup to display and print it. This method involves capturing the content of the <div>, creating a new window, and using the print command

Create a Timeline using JavaScript

In this article, we will cover how to create a timeline using HTML CSS, and JavaScript.Â A Timeline is the visual representation of events along with the time they happened. On completion, the JavaSctript timeline will look like this: Prerequisites:The prerequisites knowledge required for this projec

How to create a pop-up to print dialog box using JavaScript?

Given an HTML document and the task is to design a button that would pop-up a print dialog box. We are going to use JavaScript to do the assigned task: Approach:: Add a button which links to a JavaScript Function. Inside the JavaScript Function, use the JavaScript default function to call the print

How To Create A Countdown Timer Using JavaScript

A countdown timer is a timer that runs for a specific time limit and when that limit get crossed then it stops the timer and the message get displayed on the screen. it can be used for a website or blog to display the countdown to any special event, such as a birthday or anniversary. The Basics of a

How to get the first and last date of current month using JavaScript ?

Given a month and the task is to determine the first and last day of that month in proper format using JavaScript. JavaScript getDate() Method: This method returns the day of the month (from 1 to 31) for the defined date. Syntax: Date.getDate() Parameters: This method does not accept any parameters.

Create an Analog Clock using HTML, CSS and JavaScript

Designing an analog clock is an excellent project to enhance your web development skills. This tutorial will guide you through creating a functional analog clock that displays the current time using HTML, CSS, and JavaScript. What Weâ€™re Going to CreateWe will develop a simple analog clock that shows

How to get the day and month of a year using JavaScript ?

Given a date and the task is to get the day and month of a year using JavaScript. Approach: First get the current date by using new Date().Use getDay() method to get the current day in number format, Map it to the day name.Use getMonth() to get the current month in number format, Map it to the month

Responsive analog clock using HTML, CSS and Vanilla JavaScript

In this article, we are going to create an Analog Clock. This is mainly based on HTML, CSS & Vanilla JavaScript. Approach: Create an HTML file in which we are going to add the main div, further on we are adding 4 div tags for an hour, minute, and second hands & for the pin.Create a CSS file