JavaScript Dinamik Saat Kodu

Hucukii · 10 Haziran 2013

Javascript innerHTML kuralını öğrendikden sonra kendimi javascriptte değişik uygulamalar yapmaya adadım resmen

bugünde dinamik saat yapayım dedim ol
dukça kolay bir mantığı olan bu kod 4 adımdan oluşuyor.Dilerseniz yazının sonunda kodların birleştirilmiş hali var ordan alabilirsiniz.

1-Function oluşturma
1. adımda her saniye çalışması gerektiği için bir function oluşturmamız lazım , ve altına bu fonksiyonu her saniye çalıştırması için bir setInterval kodu ekliyoruz.

PHP:

function saatuygulamasi()
{
Diğer adımlardaki kodlar bu araya yazılacaktır.
}
setInterval("saatuygulamasi()", 1000); //1000=1 saniyeye denk gelmektedir.

2-Zamanları Değişkenlere Yükleme
Bu adımda değişkenlerimize sistem saatini yüklüyoruz.Bunun için kalıplaşmış Javascript kodlarını kullanıyoruz.

PHP:

var zaman = new Date() //sistem tarihini çekiyoruz
saat=zaman.getHours(); // sistemdeki saati çekiyoruz.
dakika=zaman.getMinutes(); // sistemdeki dakikayı çekiyoruz.
saniye=zaman.getSeconds(); // sistemdeki saniyeyi çekiyoruz.

Peki bu değerler 10un altında olursa 9 yazmasında 09 yazsın istiyorsak alttaki if kodlarını ekliyoruz bu kodların mantığı çok basittir değer 10dan ufak ise başına sıfır ekler büyük iste karışmaz.

PHP:

if(dakika<10)
{
dakika="0"+dakika;
}
if(saniye<10)
{
saniye="0"+saniye;
}

3- Değerleri ekrana yazdırmamızı sağlıyacak olan div tag'ının içerisine yüklüyoruz.
Buradaki mantığı ben yeni yeni çözmeye çalıştığım için anlatamıyorum fakat şöyle bir kısa bilgi vereyim bu kod sayesinde sayfanızın herhangi bir yerinde kullandığınız tag'a değer verebilir ve dinamikleştirebilirsiniz.Google'da getElementById diye aratarak araştırırsanız sizde mantığı anlayabilirsiniz.

PHP:

 var eleman= document.getElementById("saatuygulamasitagi"); //tag ismi saatuygulamasitagi
    eleman.innerHTML=saat+":"+dakika+":"+saniye;  //burada değerleri ekrana yazdırıyoruz.

4-Herşey bitti şimdi ekranda gösterme işlemi.

PHP:

<div id="saatuygulamasitagi"></div>

----------------------------------------
Alıntı adresi; JavaScript Dinamik Saat Yapımı www.ismailcakir.net

JavaScript Dinamik Saat Kodu

Hucukii

Profesyonel