Jquery Geri Sayım Plugini - countdownCube
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Jquery Geri Sayım Plugini - countdownCube

profil
cArleone
BEĞEN(2)
BEĞENME(0)
GÖRÜNTÜLENME(8270)
RAPOR ET
Bu dersimizde jquery'nin geri sayım pluginlerinden countdownCubeyi anlatacağım.Jqueryde bir çok geri sayım plugini bulunmakta.Tasarım ve kolaylık olarak countdownCube oldukça iyi.Kullanımına geçelim.

İndir : http://ustaderslik.com/dosya/gerisay.zip

İncele : http://ustaderslik.com/ornek/gerisay/

$('#gerisay').countdownCube({

});

Alanı seçtikten sonra pluginimizi uyguluyoruz.Bir kaç parametresi mevcut.

target :Geri sayımın başlayacağı zaman. ay gün,yıl saat:dakika:saniye .
cubeSize :3D küplerin boyutu
background :Küplerin rengi
color :Fontların rengi

Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Ustaderslik</title>
<link rel="stylesheet" href="countdowncube.min.css" />
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="countdowncube.min.js"></script>
<script type="text/javascript">
$(function(){

$('#gerisay').countdownCube({
target: new Date('January 01, 2019 23:59:00'),//ay gün,yıl saat:dakika:saniye
cubeSize: 100,//büyüklük
background: '#d12c69',//arkaplan rengi
color: '#fff'//font rengi
});

$(".countdownCubeTitleDiv").each(function(i){//Türkçeleştirme
if(i==0){ $(this).text("Yıl") }
if(i==1){ $(this).text("Ay") }
if(i==2){ $(this).text("Gün") }
if(i==3){ $(this).text("Saat") }
if(i==4){ $(this).text("Dakika") }
if(i==5){ $(this).text("Saniye") }
})

})
</script>
<style type="text/css">
.countdownCubeCube figure{border:2px solid transparent;}
</style>
</head>
<body>

<div id="gerisay"></div>

</body>
</html>

Görüntüsü :
http://ustaderslik.com/resim/ders/f48ef48d4.png

Plugin ingilizceydi ben türkçeleştirdim.Temel kullanımı bu şekilde.Eğer javascript ile bitiş anını yakalamak isteyen olursa onun için şu şekilde bir sistem hazırladım.

setInterval(function(){
var k="section .countdownCubeCube:eq(0) figure:eq(1)",
k1="section .countdownCubeCube:eq(1) figure:eq(1)",
k2="section .countdownCubeCube:eq(2) figure:eq(1)",
k3="section .countdownCubeCube:eq(3) figure:eq(1)",
k4="section .countdownCubeCube:eq(4) figure:eq(1)",
k5="section .countdownCubeCube:eq(5) figure:eq(1)";
if($(k).text()==0 && $(k1).text()==0 && $(k2).text()==0 && $(k3).text()==2 && $(k4).text()==0 && $(k6).text()==0){ alert("bitti"); }
},5000);


5 saniyede 1 hepsini kontrol ediyorum 0 olduysa hepsi bitti diye uyarı veriyorum.




bablyon0
bablyon0 10 Yıl Önce Cevaplandı
ne yaptıysam bunu sitenin ortasasına ortalayamadım bi yardım lütfen
cArleone
cArleone 10 Yıl Önce Cevaplandı
plugini uyguladığımız divi başka bir div içine alarak ona width ve margin vererek ortalayabilirsin.örnek :
<div style="width:620px;margin:auto;">
<div id="gerisay"></div>
</div>
Scofield
Scofield 10 Yıl Önce Cevaplandı
Merhabalar eklenti için teşekkürler fakat ufak bir sorun var.Gereken ayarları yapıyorum fakat 2 saat fazladan gösteriyor.Bu konuda yardımınızı bekliyorum.
cArleone
cArleone 10 Yıl Önce Cevaplandı
Pluginin o şekil de kötü bir bugu var.şu şekil de bir düzeltme kodu hazırladım.
var saat;

function dongu(){
setInterval(function(){
$("#gerisay section:eq(3) .countdownCubeCube figure").text(saat-2);
},300)
}

setTimeout(function(){
saat=parseInt($("#gerisay section:eq(3) .countdownCubeCube figure:eq(3)").text());
dongu();
},500)
Scofield
Scofield 10 Yıl Önce Cevaplandı
Teşekkür ederim.Bu kodlama ile sorunsuz çalışıyor.Fakat süre bittikten sonra bu şekilde görünüyor.Yine yardımınızı rica ediyorum. :)

http://i.hizliresim.com/662X07.png
cArleone
cArleone 10 Yıl Önce Cevaplandı
function dongu(){
setInterval(function(){
$("#gerisay section:eq(3) .countdownCubeCube figure").text(saat-2);
var k=$("#gerisay section:eq(5) .countdownCubeCube figure:eq(5)").text();
if(k=="..." || k==0){
$("#gerisay").text("GeriSayım Bitti.");
}
},300)
}

dongu fonksiyonunu şu şekil de düzenle.bu şekil de bir bitişi yakalama hazırladım.
Scofield
Scofield 10 Yıl Önce Cevaplandı
Teşekkür ederim. Bu arada size yeni bir mail gönderdim.Bakar mısınız ? :)



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol