JavaScript Digital Clock with date

javaScript digital clock with date; Through this tutorial, i am going to show you how to create digital clock with date in javaScript.

How to Create a digital clock with date using JavaScript

Use the following steps to create digital clock with date in JavaScript:

  • Step 1 – Create html file
  • Step 2 – Implement digital clock JS script
  • Step 3 – Implement css for styling
  • To display current date and time in HTML using javascript

Step 1 – Create HTML file

Create html file and add 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="time">
        <span class="hms"></span>
        <span class="ampm"></span>
        <br>
        <span class="date"></span>
      </div>
</body>
</html>                            

Step 2 – Implement digital clock JS script

Add the following javaScript function to your html file to create digital clock with date; as follows:

function updateTime() {
  var dateInfo = new Date();

  /* time */
  var hr,
    _min = (dateInfo.getMinutes() < 10) ? "0" + dateInfo.getMinutes() : dateInfo.getMinutes(),
    sec = (dateInfo.getSeconds() < 10) ? "0" + dateInfo.getSeconds() : dateInfo.getSeconds(),
    ampm = (dateInfo.getHours() >= 12) ? "PM" : "AM";

  // replace 0 with 12 at midnight, subtract 12 from hour if 13–23
  if (dateInfo.getHours() == 0) {
    hr = 12;
  } else if (dateInfo.getHours() > 12) {
    hr = dateInfo.getHours() - 12;
  } else {
    hr = dateInfo.getHours();
  }

  var currentTime = hr + ":" + _min + ":" + sec;

  // print time
  document.getElementsByClassName("hms")[0].innerHTML = currentTime;
  document.getElementsByClassName("ampm")[0].innerHTML = ampm;

  /* date */
  var dow = [
      "Sunday",
      "Monday",
      "Tuesday",
      "Wednesday",
      "Thursday",
      "Friday",
      "Saturday"
    ],
    month = [
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July",
      "August",
      "September",
      "October",
      "November",
      "December"
    ],
    day = dateInfo.getDate();

  // store date
  var currentDate = dow[dateInfo.getDay()] + ", " + month[dateInfo.getMonth()] + " " + day;

  document.getElementsByClassName("date")[0].innerHTML = currentDate;
};

// print time and date once, then update them every second
updateTime();
setInterval(function() {
  updateTime()
}, 1000);

Step 3 – Implement css for styling

So open your html file and add the below code into your file for digital clock styling:

body {
    font-family: "Work Sans", sans-serif;
 
    background: rgb(230, 230, 230);
}
.time { 
  margin:100px auto;
    background: rgb(12, 12, 12);
    color: #fff;
    border: 7px solid rgb(255, 252, 252);
    box-shadow: 0 2px 10px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    padding: 8px;
    text-align: center;
    width: 500px;
}
.hms {
    font-size: 68pt;
    font-weight: 200;
}
.ampm {
    font-size: 22pt;
}
.date {
    font-size: 15pt;
}

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>
</head>
<style>
body {
    font-family: "Work Sans", sans-serif;
 
    background: rgb(230, 230, 230);
}
.time { 
  margin:100px auto;
    background: rgb(12, 12, 12);
    color: #fff;
    border: 7px solid rgb(255, 252, 252);
    box-shadow: 0 2px 10px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    padding: 8px;
    text-align: center;
    width: 500px;
}
.hms {
    font-size: 68pt;
    font-weight: 200;
}
.ampm {
    font-size: 22pt;
}
.date {
    font-size: 15pt;
}
</style>
<body>
<div class="time">
        
        <span class="hms"></span>
        <span class="ampm"></span>
        <br>
        <span class="date"></span>
      </div>
</body>
<script>  function updateTime() {
  var dateInfo = new Date();

  /* time */
  var hr,
    _min = (dateInfo.getMinutes() < 10) ? "0" + dateInfo.getMinutes() : dateInfo.getMinutes(),
    sec = (dateInfo.getSeconds() < 10) ? "0" + dateInfo.getSeconds() : dateInfo.getSeconds(),
    ampm = (dateInfo.getHours() >= 12) ? "PM" : "AM";

  // replace 0 with 12 at midnight, subtract 12 from hour if 13–23
  if (dateInfo.getHours() == 0) {
    hr = 12;
  } else if (dateInfo.getHours() > 12) {
    hr = dateInfo.getHours() - 12;
  } else {
    hr = dateInfo.getHours();
  }

  var currentTime = hr + ":" + _min + ":" + sec;

  // print time
  document.getElementsByClassName("hms")[0].innerHTML = currentTime;
  document.getElementsByClassName("ampm")[0].innerHTML = ampm;

  /* date */
  var dow = [
      "Sunday",
      "Monday",
      "Tuesday",
      "Wednesday",
      "Thursday",
      "Friday",
      "Saturday"
    ],
    month = [
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July",
      "August",
      "September",
      "October",
      "November",
      "December"
    ],
    day = dateInfo.getDate();

  // store date
  var currentDate = dow[dateInfo.getDay()] + ", " + month[dateInfo.getMonth()] + " " + day;

  document.getElementsByClassName("date")[0].innerHTML = currentDate;
};

// print time and date once, then update them every second
updateTime();
setInterval(function() {
  updateTime()
}, 1000);
</script>
</html>                            

To 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.

More JavaScript Tutorials

One Comment

  1. Alba Delgado said:

    Digital clock time and date js

    June 28, 2020
    Reply

Leave a Reply

Your email address will not be published.