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.

You may like

  1. JavaScript Create & Call Functions with Example
  2. JavaScript Operators With Examples
  3. String Contains JavaScript | String includes() Method
  4. JavaScript Replace String With Examples
  5. JavaScript Array splice() Method By Example
  6. JavaScript: Clone an Array & Object By Examples
  7. Sorting Using JavaScript Array Sort() Method
  8. JavaScript: Convert String to Array JavaScript
  9. javaScript Push() Array By Example
  10. javaScript Push Array, Items Into Array Example
  11. Check the Object is Array or not in javascript
  12. JavaScript: Important Array Methods

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

Leave a Reply

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