myNotlar Logo

Saati Göstermek


Internet Explorer Firefox Opera

Bu konu, sayfa üzerinde nasıl saat gösterileceğini açıklamaktadır.

İçindekiler

  • Saati Öğrenmek
  • Saati "Her Saniye" Öğrenmek
  • Sonuç ve Saati Biçimlendirmek/Süslemek

Saati Öğrenmek

JavaScript dahilinde Date nesnesi ile tam saat bilgisini öğrenmek için bir çok yöntem bulunmasına rağmen bu konuda sadece iki yöntem kullanılmaktadır. Bunlardan ilki toLocaleTimeString metodudur. Bu metod, aşağıda gösterildiği gibi istemci bilgisayarının yerel gösterime uygun saat bilgisini String tipinde döndürür. İkinci yöntem ise saat bilgisinin tamamını elde etmek için ayrı ayrı, saat için getHours(), dakika için getMinutes() ve saniye için getSeconds() metodlarının kullanımıdır. Bu metodlar ilgili değerleri tam sayı (integer) tipinde döndürürler. Bu yüzden ilgili saatin, dakikanın ve saniyenin '10' on'dan ufak olması durumunda örneğin, '05' gibi bir rakam değil sadece '5' rakamı gösterilecektir. '0' Sıfır değerinin ayrıca eklenmesi gereklidir.

Aşağıda güncel "tam saat" bilgisini döndüren iki metot tanımlanmıştır. İlk metot olan verSaat(), toLocaleTimeString() metodunu kullanarak saat bilgisini döndürür. İkinci metot olan verSaDaSa(), saat bilgisini saat, dakika ve saniye bilgilerini ayrı ayrı öğrenip, '10' On'dan ufak olmaları durumunda önlerine '0' sıfır ekleyerek 3 elemanlı bir Array dizisi olarak döndürür. verSaDaSa() içindeki kodların, daha doğrusu Date nesnesinin ilgili metodlarının bu konu için tek avantajı saat, dakika ve saniye bilgilerine ayrı ayrı erişim imkanı sağlaması ve dolayısıyla zaman bilgileri arasına isteğe göre karakter eklenebilmesidir. Son metot olan saatGoster, bu iki metot ile elde edilen "tam saat" bilgisini write metodu ile sayfaya yazdırmaktadır.

<script type="text/javascript">
function verSaat()
{
    var simdi = new Date();
    return simdi.toLocaleTimeString();    // return 23:59:59
}

function verSaDaSa()
{
    var sonuc = new Array(3);
    var simdi = new Date();
    
    sonuc[0] = simdi.getHours();
    sonuc[1] = simdi.getMinutes();
    sonuc[2] = simdi.getSeconds();
    
    // Saat, Dakika ve Saniye 10'dan ufaksa önlerine '0' ekleniyor.
    for(i = 0;i < 3;i++)
        sonuc[i] = sonuc[i] < 10 ? '0' + sonuc[i] : sonuc[i];
    
    return sonuc;    // return ['23', '59', '59']
}
function saatGoster()
{
    saat = verSaat();
    document.write("verSaat : " + saat + "<br/>");
    
    saat = verSaDaSa();
    document.write("verSaDaSa : " + saat[0] + "/" + saat[1] + "/" + saat[2] + "<br/>");
}
saatGoster();
</script>
Canlı Sonuç

Saati "Her Saniye" Öğrenmek

JavaScript Date nesnesi metodları ile elde edilen saat bilgisi statiktir. Yani saat bilgisi, Date nesnesinin bir örneğini temsil eden bir değişken aracılığıyla alınır ve bu değişkende tutulan saat değeri sabittir ve değişmez. her saniye akan bir saat göstermek için her saniye yeni bir Date nesnesi oluşturularak saat değeri alınmalıdır. Farklı bir tanımla, her saniye verSaat metodu çalıştırılmalıdır.

Bu her saniye zamanlamasını uygulamak için bir zamanlama oluşturulmasını sağlayan JavaScript window.setTimeout metodu veya bir zamanlama döngüsü oluşturulmasını sağlayan JavaScript window.setInterval metodları kullanılabilir. setTimeout metodu parametre olarak aldığı fonksiyonu sadece bir kere çalıştırır. setInterval metodu ise belirtilen milisaniye cinsinden zaman aralıklarıyla sürekli çalıştırır.

Aşağıdaki örnek, saatGoster metodunun setInterval metodu kullanılarak her 1000 milisaniyede bir çalışacak şekilde zamanlanmasını göstermektedir. Buradaki saatGoster metodu, yukarıdakinden farklı olarak HTML elementlerinin HTML içeriklerinin alınmasını/değiştirilmesini sağlayan innerHTML özelliğini kullanarak gösterecek şekilde değiştirilmiştir.

<style type="text/css">
#saatKutu
{
	border:solid 2px #606060;
	padding: 5px;
}
</style>

<span id="saatKutu"></span>

<script type="text/javascript">
function saatGoster() {
	var saat = document.getElementById("saatKutu");
	saat.innerHTML = verSaat();
}

saatGoster();

setInterval("saatGoster()", 1000);

</script>
Canlı Sonuç

Sonuç ve Saati Biçimlendirmek/Süslemek

Sonuç olarak, saat bilgisini veren verSaat ve saati gösteren saatGoster fonksiyonları elde edilmiş oldu. Bundan sonrası saatin gösterileceği tamamen isteğe bağlı çerçevenin tasarımına kalmıştır! Aşağıda iki tane örnek gösterilmektedir. Birinci örnek, çerçeve kenarlığını bir saniye gösteren bir saniye göstermeyen basit bir animasyon ile saati göstermektedir. İkinci örnek, her saniye çerçeve içeriğinin arka plan rengini açık renge, hemen ardından kendi rengine alıp parlama yaparak saati göstermektedir.

Toplamda 200 ms içinde dört renk geçişi gerçekleşir. Dördüncü renk ataması ile çerçevenin kendi arkaplan rengine sıfırlanır.

Örneklerde Kullanılan Ortak CSS Sınıfı

<style type="text/css">
.ornekCerceve
{
    padding:10px;
    color:navy;
    display:inline;
    background-color: #99DDFF;
    font-weight:bold;
    font-family: "Verdana", Arial;
    border:solid 5px #99DDFF;
}
</style>

Kenarlık Animasyonu ile Saat Gösterimi




<div id="saatKutuBorder" class="ornekCerceve"></div>

<script type="text/javascript">
var aktif = true;

function saatGosterBorder()
{
    var saat = document.getElementById('saatKutuBorder')
    
    if(aktif == true) {
        saat.style.borderColor = '#77BBDD';
        aktif = false;
    }
    else {
        saat.style.borderColor = '#99DDFF';
        aktif = true;
    }
    
    saat.innerHTML = verSaat();
}

saatGosterBorder();

setInterval('saatGosterBorder()', 1000);
</script>

Parlama Animasyonlu Saat Gösterimi




<div id="saatKutuAnim" class="ornekCerceve"></div>

<script type="text/javascript">
function saatGosterAnim()
{
    var saat = document.getElementById('saatKutuAnim')    
    saat.innerHTML = verSaat();
    
    saatAnim();
}

var sira = 0;
function saatAnim()
{
    ++sira;
    var saat = document.getElementById('saatKutuAnim');
    
    if(sira == 1) saat.style.backgroundColor = '#88CCEE'
    else 
        if(sira == 2) saat.style.backgroundColor = '#77BBDD'
    else 
        if(sira == 3) saat.style.backgroundColor = '#88CCEE'
    else 
        if(sira == 4) saat.style.backgroundColor = '#99DDFF'
    
    if(sira < 5) setTimeout('saatGosterAnim()', 50);    
    else sira = 0;
}

saatGosterAnim();

setInterval('saatGosterAnim()', 1000);

</script>
 
myNotlar Hakkında
Telif Hakkı © 2007-2009 mynotlar.com Tüm Hakları Saklıdır. Kopyalanamaz. Yayınlanamaz.
E-Posta : support@myNotlar.com

| Tek Kişilik Oyunlar | Sudoku | Oyunlar |