Javascript innetHTML 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.
Kodların tamamı!
JavaScript kodu;
Css Kodu;
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.
Not; setInterval kodu mutlaka function dışına yazılmalıdır.
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.
var zaman = new Date() //sistem tarihini çekiyoruzPeki 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.
saat=zaman.getHours(); // sistemdeki saati çekiyoruz.
dakika=zaman.getMinutes(); // sistemdeki dakikayı çekiyoruz.
saniye=zaman.getSeconds(); // sistemdeki saniyeyi çekiyoruz.
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.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.
3. adımda belirlediğimiz tagı ekranda herhangi bir yerde yazdırarak kodumuzu aktif etmiş oluruz.
<div id="saatuygulamasitagi"></div>
Kodların tamamı!
JavaScript kodu;
Css Kodu;
test
YanıtlaSil