Categories
JavaScript Web development

JavaScript – Time and date

Some time ago, I posted two tutorials where you could create the clock animations (see Digital Clock – CSS & JavaScript Animation and the What time is it? – CSS Clock Animation).

Today I’ll show you how to add just time and date to your website using JavaScript.

I’ll show you two ways. First, how to add only current time, and the second how to add time and the date.

Display time

To display time on your web page follow the steps below:

  1. Add HTML
  2. Add CSS
  3. Add JavaScript

Step1.

Add HTML

<body onload="startTime()">
<div id="time"></div>

Step2.

Add CSS

body {
  background: linear-gradient(0deg, rgba(17,24,101,1) 16%, rgba(13,13,31,1) 99%);
  display: flex;
  height: 100vh;  
  align-items: center;
  justify-content: center;
  overflow: hidden;
 }

#time {
   position: absolute;
   color: white;
   font-size: 100px;
   font-family: Impact, Charcoal, sans-serif;
   letter-spacing: 22px;
   z-index:10;
    text-shadow: 5px 10px 10px rgba(0, 0, 0, 0.7),
                -3px 10px 12px rgba(0, 0, 0, 0.7);

}

Step3.

Add JavaScript

function startTime() {
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();
  m = checkTime(m);
  s = checkTime(s);
  document.getElementById('time').innerHTML =
  h + ":" + m + ":" + s;
  var t = setTimeout(startTime, 500);
}
function checkTime(i) {
  if (i < 10) {i = "0" + i};  
  return i;
}
To see the live output of the animation click here.

Display time and date

To display time on your web page follow the steps below:

  1. Add HTML
  2. Add CSS
  3. Add JavaScript

Step1.

Add HTML

<div class="date" id="time"></div>

Step2.

Add CSS

body {
  background: linear-gradient(0deg, rgba(17,24,101,1) 16%, rgba(13,13,31,1) 99%);
  display: flex;
  height: 100vh;  
  align-items: center;
  justify-content: center;
  overflow: hidden;
 }

#time {
   position: absolute;
   color: white;
   font-size: 100px;
   font-family: Impact, Charcoal, sans-serif;
   letter-spacing: 22px;
   z-index:10;
    text-shadow: 5px 10px 10px rgba(0, 0, 0, 0.7),
                -3px 10px 12px rgba(0, 0, 0, 0.7);

}

Step3.

Add JavaScript

function getDateTime() {
        var now     = new Date(); 
        var year    = now.getFullYear();
        var month   = now.getMonth()+1; 
        var day     = now.getDate();
        var hour    = now.getHours();
        var minute  = now.getMinutes();
        var second  = now.getSeconds(); 
        if(month.toString().length == 1) {
             month = '0'+month;
        }
        if(day.toString().length == 1) {
             day = '0'+day;
        }   
        if(hour.toString().length == 1) {
             hour = '0'+hour;
        }
        if(minute.toString().length == 1) {
             minute = '0'+minute;
        }
        if(second.toString().length == 1) {
             second = '0'+second;
        }   
        var dateTime = year+'/'+month+'/'+day+' '+hour+':'+minute+':'+second;   
         return dateTime;
    }

    // example usage: realtime clock
    setInterval(function(){
        currentTime = getDateTime();
        document.getElementById("time").innerHTML = currentTime;
    }, 1000);
To see the live output of the animation click here.

Enjoy coding!