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.

JavaScript Digital Clock with date

How to Create a digital clock with date using 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

Conclusion

More JavaScript Tutorials

Admin

One Comment

Leave a Reply Cancel reply