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.

İyi çalışmalar,

Oğuzhan TAŞ
Aralık - 2014

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