Jquery Geri Sayım Plugini - countdownCube
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

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(3058)
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 3 Yıl Önce Cevaplandı
ne yaptıysam bunu sitenin ortasasına ortalayamadım bi yardım lütfen
cArleone
cArleone 3 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 3 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 3 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 3 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 3 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 3 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