Jquery Geri Sayım Plugini

Udemy'e Git

Demo

Jquery Geri Sayım Plugini - countdownCube

cArleone

BEĞEN(2)

BEĞENME(0)

GÖRÜNTÜLENME(8254)

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 10 Yıl Önce Cevaplandı

ne yaptıysam bunu sitenin ortasasına ortalayamadım bi yardım lütfen

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

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