Blog Yazarı Olmak İster misin?

Kaleminize güveniyorsanız, bloğumuzda özgürce web, hosting, teknoloji ve programlama dilleri üzerine makale yazabilirsiniz. Bizde sizi sürekli hediye kuponlar ile ödüllendiririz. Blog Yaz!


Jquery İle Geri Sayım Sayacı Yapımı

Tahmini okuma 1 dakika 30 saniye Görüntülenme: 58

Bazı form alanlarında bir işlemin sık sık yapılmasını önlemek veya sayfada beklenilen belirli bir sürenin sonunda ziyaretçi için bir işlem yapmak istediğimiz durumlarda ihtiyacımızın olduğu örnekleri bolca çoğaltabileceğimiz minik bir uygulama yapacağız. Geri sayım sayacımız sıfırlandığında yönlendirme işlemi yapacağız, bu kodlarımızı da fonksiyona çevireceğiz.

function surelimiti(saniye){
    setInterval(function(){
      if(saniye > 1){
        saniye--;
        console.log(saniye + ' bekleyin');
      }else{
        $(location).attr('href', 'https://viptema.com')
      }
    },1000);
  }
  
  surelimiti(20);

Yukarıda ki kda göre 20 saniye sonra yönlendirme gerçekleşecek, console.log'ta ise canlı olarak 20 den geriye doğru sayılacaktır. Dilerseniz bunu bir html olarak gösterebilirsiniz. Eğer bekletilmek istenen süre post işlemi sonucu size dönüyor ve dinamikse fonksiyon içerisine bu değeri yazmalısınız.

Örnek senaryo

 //ajax.php den dönen örnek json yanıt
 //{"durum": "zamanvar","kalan_saniye": 20}
 
 $("#sifremiunuttum").submit(function(e) {
  e.preventDefault();
  var formData = new FormData(this);
  $.ajax({
    type: "POST",
    url: 'ajax.php',
    data:formData,
    cache:false,
    contentType: false,
    processData: false,
    dataType:"json",
    success: function(data){

      if (data.durum == "zamanvar"){
        surelimiti(data.kalan_saniye);

      }

      if (data.durum == "ok"){
        //yapacağınız işlemler

      }

  });
});

Php tarafında dinamik olarak session ile kalan saniyeyi json ile aşağıdaki gibi gösterebilirsiniz.

if ( !isset($_SESSION['surelimit']) ){ //session yoksa
	$_SESSION['surelimit'] = time() + 120;


	$output["durum"] = "ok";
}else{ //session varsa
	if (time() > $_SESSION['surelimit']) {
		$_SESSION['surelimit'] = time() + 120;

		$output["durum"] = "ok";
	}else{
		$output["durum"] = "zamanvar";

		$d1 = new DateTime(date("Y-m-d H:i:s"));
		$d2 = new DateTime(date('Y-m-d H:i:s', $_SESSION['surelimit']));
		$saniye_farki = $d2->getTimestamp() -$d1->getTimestamp();
		$output["kalan_saniye"] = $saniye_farki;
	}
}
echo json_encode($output);

3 hafta önce Özkan Işık tarafından yazıldı. Son güncelleme 07.09.2022 03:19

Yorum Yap


İlk yorumu yapan sen ol!
Blogtan Son Yazılar

Yeni Ürünlerden İlk Siz Haberdar Olun!

Şimdi abone olarak yeni ürün ve indirim kampanyalarından anında faydalanın!

veya üye olmak isteyebilirsiniz

Üye Ol