JavaScript İle Saat Yapımı Kodları

« F Harfiyle Başlayan Erkek ve Kız İsimleri

Herkese iyi günler dileriz arkadaşlar.Bu yazımızda sizlere javascript ile saat yapımı kodlarını paylaşacağız.

Javascript gitgide gelişmekte olan bir dildir.Öncelerden pek meşhur değildi fakat artık hemen hemen her sektörde javascript kullanılmaya başlandı.Bu yüzden javascripti sizlere en iyi şekilde örneklerle açıklarız diye düşündük.Daha önceden de bir iki örnek çalışma yapmıştık.Onlara “JavaScript” adlı kategoriden ulaşabilirsiniz.

Şimdi sizlere basit şekilde javascript ile anlık doğru saat nasıl yaparız onu kodlarla anlatacağız.Öncelikle şunu söyleyelim bu kodlar saati bilgisayarınızın saatine göre çekiyor.Yani bilgisayarınızdaki saat yanlışsa kodlardaki saat de yanlış olabilir.Şimdi lafı uzatmadan kodlara ve anlatıma geçelim.Anlatımı kodların yanında paylaşacağız.

Saat Yapımı JavaScript Kodları

<script>
var aSaat = document.getElementById("saat"); //aSaat adında bir değişken tanımladık.
function format(saatcek) {
var bSaat = saatcek.toString();
if (bSaat.length == 1) {
return "0" + bSaat;
} else {
return bSaat;
}
}
function saatGuncelleme() { //Burada bilgisayarımızdan saati çekiyoruz.
var tarih = new Date();
var saat = tarih.getHours(); //Burada saati çekiyoruz.
var dakika = tarih.getMinutes(); //Burada dakikayı çekiyoruz.
var saniye = tarih.getSeconds(); //Burada saniyeyi çekiyoruz.
aSaat.textContent = format(saat) + ":" + format(dakika) + ":" + format(saniye); //Burada ekranımıza çıktımızı veriyoruz.
}
setInterval(saatGuncelleme, 1000);
</script>

var aSaat = document.getElementById("saat"); //aSaat adında bir değişken tanımladık.

function format(saatcek) {

var bSaat = saatcek.toString();

if (bSaat.length == 1) {

return "0" + bSaat;

} else {

return bSaat;

}

function saatGuncelleme() { //Burada bilgisayarımızdan saati çekiyoruz.

var tarih = new Date();

var saat = tarih.getHours(); //Burada saati çekiyoruz.

var dakika = tarih.getMinutes(); //Burada dakikayı çekiyoruz.

var saniye = tarih.getSeconds(); //Burada saniyeyi çekiyoruz.

aSaat.textContent = format(saat) + ":" + format(dakika) + ":" + format(saniye); //Burada ekranımıza çıktımızı veriyoruz.

}

setInterval(saatGuncelleme, 1000);

</script>

Saat Yapımı Html Kodları

<html> //Html etiketlerini açıyoruz.Aslında burada her şey aynı fakat sadece html etiketlerini de eklemiş olduk.Siz isterseniz javascript.js uzantılı bir dosya açıp js kodlarını oraya da ekleyip html'e çekebilirsiniz.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> //Türkçe karakter sorunu olmaması için eklenen kod.
<link type="text/css" rel="stylesheet" href="css.css" />
</head> 
<body>
<div id="buton">
</br>
<center>Şuandaki saat = <span id="saat"> </span> 'dir.</center> //Burada çıktımızı veriyor.Buna bilerek css kodu da yaptık.Arka plan kırmızı bir buton içinde gözükecek.Siz bunu istediğiniz gibi değiştirebilirsiniz.
</div>
<script>
//Buraya üstteki javascript kodları gelecek!
</script>
</body>
</html>

<html> //Html etiketlerini açıyoruz.Aslında burada her şey aynı fakat sadece html etiketlerini de eklemiş olduk.Siz isterseniz javascript.js uzantılı bir dosya açıp js kodlarını oraya da ekleyip html'e çekebilirsiniz.

<head>

</head>

<body>

</br>

<center>Şuandaki saat = <span id="saat"> </span> 'dir.</center> //Burada çıktımızı veriyor.Buna bilerek css kodu da yaptık.Arka plan kırmızı bir buton içinde gözükecek.Siz bunu istediğiniz gibi değiştirebilirsiniz.

</div>

//Buraya üstteki javascript kodları gelecek!

</script>

</body>

</html>

Saat Yapımı Css Kodları

#buton{
background-color:red; //Burada arka planı kırmızı yaptık.Siz dilerseniz mavi,sarı,turuncu vs. istediğinizi yapın.
height: 60px; //Aynı şekilde boyutları da istediğiniz gibi ayarlayabilirsiniz.
width: 220px;
}

#buton{

background-color:red; //Burada arka planı kırmızı yaptık.Siz dilerseniz mavi,sarı,turuncu vs. istediğinizi yapın.

height: 60px; //Aynı şekilde boyutları da istediğiniz gibi ayarlayabilirsiniz.

width: 220px;

}

Gördüğünüz gibi arkadaşlar kodlar bu şekildedir.Şimdi ekran görüntüsüne bakalım.

Gördüğünüz gibi arkadaşlar saatimiz hatasız çalışıyor.Bu kodları sitenizde istediğiniz yere koyarak saat görünümü elde edebilirsiniz.Dilerseniz css ile gerekli şekiller veya tasarımlar da uygulayabilirsiniz.Ek olarak html kısmındaki <script> etiketleri içerisine üstteki javascript kodları gelecektir.Bu yüzden tekrardan kodları yazmadık.

Umarız faydalı olur.Herkese iyi çalışmalar dileriz.Yorumlarınızı bekliyoruz teşekkürler…

Bu Yazıya Tepkin Ne Oldu ?