<div class="digital-clock">
  <div class="clock">
  </div>
  <div id="DigitalClock" class="time" onload="showTime()"></div>
</div>
@import url('https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&display=swap');

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;
}

.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;
}

.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;
}

.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;
}

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.