Blogger Javascript Kullanarak Dijital Saat Eklentisi

Merhaba okuyucular, Bugün bu blogda Javascript kullanarak bir Dijital Çalışma Saati oluşturmayı öğreneceksiniz. Daha önce HTML CSS & Javascript kullanarak Çalışan Analog Saat paylaşmıştım , şimdi Javascript kullanarak Dijital Saat oluşturma zamanı.

JavaScript, cihazınızdan gerçek zamanlı olarak alır ve bunu web sayfasında görüntüler. Ve bu gönderi, JavaScript'in nasıl zaman kazandığı ve bazı temel yöntemlerle görüntülendiği hakkındadır. Resimde gördüğünüz gibi gerçek zamanlı bir dijital saat var, bu da zamanı saat, dakika ve saniye olarak sayı olarak görebileceğiniz anlamına geliyor.

Javascript Kullanarak Dijital Saat Çalışması

Öncelikle aşağıda ki HTML kodlarını ekleyelim.

12345678910111213141516171819202122232425262728293031323334353637383940414243444546      
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- Somehow I got an error, so I comment the title, just uncomment to show -->
    <!-- <title>Digital Clock Javascript | CodingNepal</title> -->
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="clock">
      <div class="display">
</div>
</div>
<script>
      setInterval(function(){
        const clock = document.querySelector(".display");
        let time = new Date();
        let sec = time.getSeconds();
        let min = time.getMinutes();
        let hr = time.getHours();
        let day = 'PM';
        if(hr > 12){
          day = 'PM';
          hr = hr - 12;
        }
        if(hr == 0){
          hr = 12;
        }
        if(sec < 10){
          sec = '0' + sec;
        }
        if(min < 10){
          min = '0' + min;
        }
        if(hr < 10){
          hr = '0' + hr;
        }
        clock.textContent = hr + ':' + min + ':' + sec + " " + day;
      });
    </script>

  </body>
</html>

Şimdi aşağıda ki CSS kodlarını ekleyelim.

12345678910111213141516171819202122232425262728293031     @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,body{
  height: 100%;
}
body{
  display: grid;
  place-items: center;
  background: #131419;
}
.clock{
  background: #131419;
  height: 120px;
  
  line-height: 120px;
  text-align: center;
  padding: 0 30px;
  box-shadow: -3px -3px 7px rgba(255,255,255,0.05),
               3px 3px 5px rgba(0,0,0,0.5);
}
.clock .display{
  font-size: 60px;
  color: cyan;
  letter-spacing: 5px;
  font-family: 'Orbitron', sans-serif;
}

Bütün işlemler bu kadar herkese kolay gelsin.

DEMO