Javascript ile saat yapımı

Javascript ile saat yapısını gösterip uygulamasını yapacağız.

Uzun süredir yazı paylaşamıyordum.aslında ne paylaşssam diye düşünüyordum. iki gün içerisinde 3 tane yazı yazacağım.Bunlardan 2 tanesi instagram ile ilgili bir tanesi ise yeni yapmış olduğum video-download.xyz hakkında olacak.

Yakın zamanda node.js derslerine başladım güzel hoş bir kullanımı var ve gayette kullanışlı.İlk olarak temel javascript kodlarını gösterdikleri için bende öğrendiklerimi harmanlayarak bir saat uygulaması yaptım.

Kodlama

ilk olarak saati göstereceğimiz alanı html tagını oluşturalım

<p id="p1"></p>

<p> taglarının arasında saatimizi çalıştıracağız bunun için bize p1 idsi gerekli

Ardında şuan ki saat,dakika ve saniyeyi alalım.

var tarih = new Date(); // tarih başlattık
var dakika = tarih.getMinutes(); // dakikayı aldık
var saniye = tarih.getSeconds();  // Saniyeyi aldık
var saat = tarih.getHours(); // Saati aldık

setInterval Fonksiyonunu kullanarak bir saniyede bir işlem başlatalım

setInterval(function () {
    /*
      İşlemler Burada Yapılacak

    */
   
},1000); // 1000 milisaniye , yan, her 1 saniyede işlem yapar

Fonksiyonumuzun içinde ilk olarak p1 idsine saati yazdıralım

document.getElementById("p1").innerHTML = saat+":"+dakika+":"+saniye;

İşlem bittikten sonra saniyeyi 1 arrtıralım ve if sorgusu ile 60. saniyeye gelip gelmediğini kontrol edelim . 59. saniyeye gelmişse dakikayı 1 arttıralım ve saniyeyi sıfırlayalım.

    saniye = saniye + 1;

    if (saniye == 60){
        saniye = 1;
        dakika++;
    }

Şimdi de dakikayı if sorgusuna sokarak 60. dakikaya gelip gelmediğini kontrol edelim eğer 60. dakikaya ulaştıysa saati 1 arttırıp dakikayı sıfırlayalım.

    if (dakika == 60){
        dakika = 0;
        saat++;
    }

İşlemlerimiz bukadar , Tüm kodları hemen altta bulabilirsiniz

<html>
    <head>
        <title>
            anasayfa
        </title>
    </head>
    <body>
 
        <p  id="p1"></p>
  <script>
        var tarih = new Date();
        var dakika = tarih.getMinutes();
        var saniye = tarih.getSeconds();
        var saat = tarih.getHours();
 
        setInterval(function () {
 
            document.getElementById("p1").innerHTML = saat+":"+dakika+":"+saniye;
            saniye = saniye + 1;
 
            if (saniye == 59){
                saniye = 0;
                dakika++;
            }
            if (dakika == 60){
                dakika = 0;
                saat++;
            }
        },1000);
        </script>
 </body>
</html>

Çıktı Aşağıdaki gibidir

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir