Membuat Animasi Jam Digital dengan CSS dan JavaScript

by Paiton Tio

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jam Digital</title>
<link rel="stylesheet" href="./style.css" type="text/css" />
</head>
<body>
<div class="jam-digital">
<div id="jam"></div>
<div id="unit">
<span>Jam</span>
<span>Menit</span>
<span>Detik</span>
</div>
</div>
<script type="text/javascript" src="./jam.js"></script>
</body>
</html>

CSS

body {
   background: #282828;
   font-family: tahoma;
   color: #fff;
}
h1 {
   margin: 20px 10%;
   font-size: 60px;
   letter-spacing: 10px;
}
.jam-digital {
   width: 70%;
   margin: 10% 30%;
}
#jam span {
   float: left;
   text-align: center;
   font-size: 70px;
   margin: 0 2.5%;
   padding: 20px;
   width: 15%;
   border-radius: 10px;
   box-sizing: border-box;
}
#jam span:nth-child(1) {
   background: #a70c0c;
}
#jam span:nth-child(2) {
   background: #f6ab29;
}
#jam span:nth-child(3) {
   background: #298f19;
}
#jam::after {
   content: "";
   display: block;
   clear: both;
}
#unit span {
   float: left;
   width: 20%;
   margin-top: 30px;
   text-align: center;
   text-transform: uppercase;
   letter-spacing: 2px;
   font-size: 18px;
   text-shadow: 1px 1px 1px rgba(10, 10, 10, 0.7)
}
span.turn {
   animation: turn 0.7s ease;
}
@keyframes turn {
   0% {transform: rotateX(0deg)}
   100% {transform: rotateX(360deg)}
}
@media screen and (max-width: 980px){
   #jam span {
      float: left;
      text-align: center;
      font-size: 50px;
      margin: 0 1.5%;
      padding: 20px;
      width: 20%;
   }
   h1 {
      margin: 20px 5%;
   }
   .jam-digital {
      width: 100%;
      margin: 10% 20%;
   }
   #unit span {
      width: 23%;
   }
}

JavaScript

function animation(span) {
   span.className = "turn";
   setTimeout(function () {
      span.className = ""
   }, 700);
}

function jam() {
   setInterval(function () {

      var waktu = new Date();
      var jam   = document.getElementById('jam');
      var hours = waktu.getHours();
      var minutes = waktu.getMinutes();
      var seconds = waktu.getSeconds();

      if (waktu.getHours() < 10)
      {
         hours = '0' + waktu.getHours();
      }
      if (waktu.getMinutes() < 10)
      {
         minutes = '0' + waktu.getMinutes();
      }
      if (waktu.getSeconds() < 10)
      {
         seconds = '0' + waktu.getSeconds();
      }
      jam.innerHTML  = '<span>' + hours + '</span>'
                     + '<span>' + minutes + '</span>'
                     + '<span>' + seconds +'</span>';

      var spans      = jam.getElementsByTagName('span');
      animation(spans[2]);
      if (seconds == 0) animation(spans[1]);
      if (minutes == 0 && seconds == 0) animation(spans[0]);

   }, 1000);
}

jam();