Categories
CSS JavaScript Web development

Digital Clock – CSS & JavaScript Animation

Some time ago I created the Analog Clock CSS & JavaScript tutorial (to learn how to create Analog Clock click here), however, not everyone is using the analog clock, so today I’ve prepared a tutorial about the second type of clock – digital clock.

Digital Clock
Do you like this image? Check more images in the store.
*animation opened in the Safari browser.
To see the live output of the animation click here.

What do you need to do?

  1. Add HTML
  2. Add CSS
  3. Add JavaScript (to set the current time)

Step1

Add HTML

Project your Clock:

<div class="container">
  <div class="digitalclock">
    <div class="front"></div>
    <div class="feet"></div>
    <div class="shadow"></div>
  </div>
   <div id="DigitalClock" class="time" onload="showTime()"></div>
</div>
             

Step2.

Add CSS

Set the colour and the size of your background:

body {
  background-color:#138D75;
  display: flex;
  height: 100vh;  
  align-items: center;
  justify-content: center;
  overflow: hidden;
 }

Style you Clock:

.container {
    position: relative; 
  
}
.digitalclock {
  top:-150px;
  left:-100px;
  position: relative; 
}

.front {
  position: absolute;
  width: 230px;
  height:50px; 
  background-color: #C0392B;
  border-radius: 100px;
  box-shadow:inset 5px 5px 0 rgba(0,0,0,0.07);
  
}
.front:after {
  content:"";
  position: absolute;
  background-color: #CACFD2;
  width:450px;
  height:200px;
  top:20px;
  left:-115px;
  border-radius:50px;
  box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
  
}
.front:before {
  content:"";
  position: absolute;
  background-color:#1C2833;
  width:380px;
  height:150px;
  z-index:1;
  top:45px;
  left:-80px;
  border-radius:30px;
  box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
}
.feet {
  position:absolute;
  width:50px;height:70px;
  background-color:#424949;
  border-radius:20px;
  top:165px;
  left:-60px;
  z-index:-1;
}
.feet:after {
  content:"";
  position:absolute;
  width:50px;height:70px;
  background-color:#424949;
  border-radius:20px;
  top:0;
  left:280px;
}
.time {
    position: absolute;
    transform: translateX(-50%) translateY(-50%);
    color: #E67E22;
    font-size: 100px;
    font-family: Impact, Charcoal, sans-serif;
    letter-spacing: 22px;
    z-index:10;
    top:-30px;
    left:15px;
    text-shadow: 5px 10px 10px rgba(0, 0, 0, 0.7),
                -3px 10px 12px rgba(0, 0, 0, 0.7);

}
.shadow {
  position:absolute;
  width:550px;
  height:100px;
  background-color: rgba(0,0,0,0.09);
  border-radius:50%;
  top:200px;
  z-index:-2;
  left:-165px;
}

add the time to the clock:

.time {
    position: absolute;
    transform: translateX(-50%) translateY(-50%);
    color: #E67E22;
    font-size: 100px;
    font-family: Impact, Charcoal, sans-serif;
    letter-spacing: 22px;
    z-index:10;
    top:-30px;
    left:15px;
    text-shadow: 5px 10px 10px rgba(0, 0, 0, 0.7),
                -3px 10px 12px rgba(0, 0, 0, 0.7);

}

Step3.

Add JavaScript

Set the current time:

function showTime(){
    var date = new Date();
    var h = date.getHours(); 
    var m = date.getMinutes(); 
    
    
    
    if(h == 0){
        h = 12;
    }
    
    if(h > 12){
        h = h - 12;
        
    }
    
    h = (h < 10) ? "0" + h : h;
    m = (m < 10) ? "0" + m : m;
    
    
    var time = h + ":" + m;
    document.getElementById("DigitalClock").innerText = time;
    document.getElementById("DigitalClock").textContent = time;
    
    setTimeout(showTime, 1000);
    
}

showTime();

To see the live output of the animation visit: lenastanley.com.

To see more examples of digital clock animation check also my Home Office animation and JavaScript – Time and date.

Enjoy coding!

Leave a Reply