CSS & JavaScript Digital Clock

Demo:

What do you need to do?

To create the CSS & JavaScript Digital Clock follow the steps below and watch the video tutorial.

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

Step1

Add HTML

Project your Clock:

<div class="digital-clock">
  <div class="clock">
  </div>
  <div id="DigitalClock" class="time" onload="showTime()"></div>
</div>

Step2.

Add CSS

Import the font:

@import url('https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&display=swap');

Set the colour and the position of the background and elements:

body {
  display: flex;
  height: 100vh;  
  align-items: center;
  justify-content: center;
 }

.digital-clock {
  position: relative;
  width:350px;
  height:350px;
  background-color: #83c5be;
  overflow: hidden;
  border-radius:50%;
  z-index:1;
}

Style the Clock:

.clock {
  position: absolute;
  width: 200px;
  height: 80px;
  border:10px solid #e5e5e5;
  background-color:#14213d;
  top:130px;
  left:65px;
  z-index:2;
}

.clock:before {
  content:"";
  position: absolute;
  width:20px;
  height:10px;
  background-color: #333;
  top:90px;
  left:20px;
  border-radius:0 0 10px 10px;
  box-shadow: 135px 0 #333;
}

.clock:after {
  content:"";
  position: absolute;
  width:150px;
  height:10px;
  background-color: #fca311;
  top:-20px;
  left:25px;
  border-radius:20px 20px 0 0;
}

Add the shadow:

.digital-clock:before {
  content:"";
  position: absolute;
  width:200px;
  height:200px;
  background-color: #699e98;
  top:130px;
  left:185px;
  transform: skew(45deg);
}

.digital-clock:after {
  content:"";
  position: absolute;
  background-color: #699e98;
  transform: skew(45deg);
  width:120px;
  height:200px;
  top:230px;
  left:165.5px;
}

Add the time to the clock (the time will be visible after adding to the code JavaScript):

.time {
  position: absolute;
  transform: translateX(-50%) translateY(-50%);
  font-family: 'ZCOOL QingKe HuangYou', cursive;
  font-size:70px;
  z-index:3;
  color: #d9ed92;
  top:177px;
  left:174px
}

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();

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

HTML5 Canvas Analog Clock

JavaScript – Time and date

CSS & jQuery Stopwatch