javaScript Digital Clock with date

javaScript Digital Clock with date

javaScript Digital Clock with date. In this javaScript Digital Clock with date tutorial, we will learn how to create digital clock with date in javaScript.

Display current date and time in digital clock using javascript

javaScript Digital Clock with date

In the digital clock, the time will be display in the 12-hour format of HH : MM : SS AM/PM.

If you want to show time 24-hour in digital clock, so you can set time format like HH : MM : SS. and the time will be shown in 24-hour format.

javaScript Digital Clock with date

Follow the below three steps and create digital clock with date in javascript:

  • Create one html file
  • Write digital clock script
  • Write css for styling

Create one HTML file

In this create one html file and update the below code into your file.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>javaScript Digital Clock with date</title>
</head>
<body>
  <div class="digital_clock_wrapper">
   <div id="digit_clock_time"></div>
   <div id="digit_clock_date"></div>
 </div>
</body>
</html>                            

Write digital clock script

Next step, open your HTML file and update the below script code into your file:

<script type="text/javascript">
function currentTime() {
  var date = new Date(); /* creating object of Date class */
  var hour = date.getHours();
  var min = date.getMinutes();
  var sec = date.getSeconds();
  var midday = "AM";
  midday = (hour >= 12) ? "PM" : "AM"; /* assigning AM/PM */
  hour = (hour == 0) ? 12 : ((hour > 12) ? (hour - 12): hour); /* assigning hour in 12-hour format */
  hour = changeTime(hour);
  min = changeTime(min);
  sec = changeTime(sec);
  document.getElementById("digit_clock_time").innerText = hour + " : " + min + " : " + sec + " " + midday; /* adding time to the div */

  var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
  var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

  var curWeekDay = days[date.getDay()]; // get day
  var curDay = date.getDate();  // get date
  var curMonth = months[date.getMonth()]; // get month
  var curYear = date.getFullYear(); // get year
  var date = curWeekDay+", "+curDay+" "+curMonth+" "+curYear; // get full date
  document.getElementById("digit_clock_date").innerHTML = date;

  var t = setTimeout(currentTime, 1000); /* setting timer */
}

function changeTime(k) { /* appending 0 before time elements if less than 10 */
  if (k < 10) {
    return "0" + k;
  }
  else {
    return k;
  }
}

currentTime();

</script> 

Write css for styling

Final step, write a css for styling your digital clock. So open your html file and update the below code into your file for digital clock styling:

<style type="text/css">
/* Google font */
@import url('https://fonts.googleapis.com/css?family=Orbitron');

#digit_clock_time {
  font-family: 'Work Sans', sans-serif;
  color: #66ff99;
  font-size: 35px;
  text-align: center;
  padding-top: 20px;
}
#digit_clock_date {
  font-family: 'Work Sans', sans-serif;
  color: #66ff99;
  font-size: 20px;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}
.digital_clock_wrapper{
    background-color: #333;
    padding: 25px;
    max-width: 350px;
    width: 100%;
    text-align: center;
    border-radius: 5px;
    margin: 0 auto;
}
</style>

The full source code of javascript digital clock with a date is below:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>javaScript Digital Clock with date</title>
<script type="text/javascript">
function currentTime() {
  var date = new Date(); /* creating object of Date class */
  var hour = date.getHours();
  var min = date.getMinutes();
  var sec = date.getSeconds();
  var midday = "AM";
  midday = (hour >= 12) ? "PM" : "AM"; /* assigning AM/PM */
  hour = (hour == 0) ? 12 : ((hour > 12) ? (hour - 12): hour); /* assigning hour in 12-hour format */
  hour = changeTime(hour);
  min = changeTime(min);
  sec = changeTime(sec);
  document.getElementById("digit_clock_time").innerText = hour + " : " + min + " : " + sec + " " + midday; /* adding time to the div */

  var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
  var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

  var curWeekDay = days[date.getDay()]; // get day
  var curDay = date.getDate();  // get date
  var curMonth = months[date.getMonth()]; // get month
  var curYear = date.getFullYear(); // get year
  var date = curWeekDay+", "+curDay+" "+curMonth+" "+curYear; // get full date
  document.getElementById("digit_clock_date").innerHTML = date;

  var t = setTimeout(currentTime, 1000); /* setting timer */
}

function changeTime(k) { /* appending 0 before time elements if less than 10 */
  if (k < 10) {
    return "0" + k;
  }
  else {
    return k;
  }
}

currentTime();

</script> 

<style type="text/css">
/* Google font */
@import url('https://fonts.googleapis.com/css?family=Orbitron');

#digit_clock_time {
  font-family: 'Work Sans', sans-serif;
  color: #66ff99;
  font-size: 35px;
  text-align: center;
  padding-top: 20px;
}
#digit_clock_date {
  font-family: 'Work Sans', sans-serif;
  color: #66ff99;
  font-size: 20px;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}
.digital_clock_wrapper{
    background-color: #333;
    padding: 25px;
    max-width: 350px;
    width: 100%;
    text-align: center;
    border-radius: 5px;
    margin: 0 auto;
}
</style>
</head>
<body>
  <div class="digital_clock_wrapper">
   <div id="digit_clock_time"></div>
   <div id="digit_clock_date"></div>
 </div>
</body>
</html>                            

Output:- display current date and time in HTML using javascript

javaScript Digital Clock with date

Conclusion

In this javascript digital clock tutorial, you have learned how to create digital clock javascript.

Recommended JavaScript Tutorials

If you have any questions or thoughts to share, use the comment form below to reach us.

AuthorAdmin

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

One reply to javaScript Digital Clock with date

  1. Digital clock time and date js

Leave a Reply

Your email address will not be published. Required fields are marked *