JavaScript ile belli bir zaman diliminde sayfa yenileme

Bu yazımızda bir div içindeki bilgiyi her saniye yenileyen bir kod yazacağız. Örneğin her saniye diğer bir php sayfasına gidip oradaki bilgiyi alıp gelen bir kod yazalım. Bunun için küçük JavaScript'de setInterval fonksiyonu işimizi görecektir. Kullanımı aşağıdaki gibidir.

setInterval( Yapılacak_İş , Süre )

Aşağıdaki kod satırında 3000 milisaniyede bir yani 3 saniyede bir ekrana Merhaba yazacaktır.


setInterval(function(){ alert("Merhaba"); }, 3000);
 
Aşağıdaki kod kısmında ise islem2.php dosyasını her saniyede bir çağırıyoruz. islem2.php içinde ise basit olsun diye saat, dakika, saniye cinsinden zamanı yazdık.

islem.php dosyası içeriği

<html>
<head>
<title>Ajax </title>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
 
<script type="text/javascript">
      var otomatik_yenile = setInterval(
        function ()
        {  $('#yenile').load('islem2.php').fadeIn("slow");}, 1000
       ); 
</script>
</head>
<body>
<div id="yenile"> </div>
</body>
</html>

Aşağıdaki yukarıdaki kod satırları arasında çağrılan islem2.php dosyasının içeriğini görüyorsunuz. Bu dosyada ilk önce tarih zamanı doğru versin diye timezone ayarlaması yaptık, sonra hem tarihi hem zamanı ekrana yazdırdık.

islem2.php dosyası içeriği


<?php 

 date_default_timezone_set('Europe/Istanbul');
 echo "Bu sayfa her saniyede bir çağrılmaktadır.<br>";
 echo date('d.m.Y H:i:s');

 ?>

Bu örneği anladıysanız, her saniyede bir web sayfasının zemin rengini yenileyen bir uygulama da siz yazmaya çalışın. Örneğin zaman 12:10:21 olsun bu bilgiden bir #121021 şeklinde 6 haneli renk kodu üretebilir, bunu da html'de sayfanın zemin rengi değerine atarsanız, her saniyede web sayfanızın zemin rengi değişecektir.

JavaScript ile CSS kodlarını Yönlendirme
JavaScript ile Zemin Rengini Değiştirme
JavaScript ile Metin Kutusu değerini artırmak ve azaltmak
JavaScript ile Form Kontrolü
JavaScript ile Döngüler
JavaScript ile Fonksiyon İşlemleri
JavaScript ile Harf ve Rakam Kontrolü
JavaScript ile Basit Hesaplatma İşlemleri
JavaScript ile Ortalama ve Harf Notu Hesaplama
JavaScript ile Twitter benzeri karakter kontrolü

JavaScript ile Yuvarlatma Hatası nasıl düzeltilir?
JavaScript Luhn Algoritması ile Kredi Kartı Doğrulama

İyi çalışmalar,

Oğuzhan TAŞ
Aralık - 2014

Bookmark and Share
Dil Değiştir(Change Language)