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>
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.