Merhaba arkadaşlar. İnternette takıldığım forumlardan wmaraci.com ‘da birinin geri sayım script istemesi ve küçük bi araştırma sonucu ücretsiz bir jQuery eklentisi buldum. Bu eklentinin sitesini incelemek isterseniz buraya tıklayarak gidebilirsiniz.

Aslında çok basit bir eklenti kodları inceleyerek anlayabilirsiniz. İlk etapta buraya tıklayarak örnek dosyaları indirin ki uygulama üzerinde çalışabilelim.

Örnek dosyamızı indirdik ve zip halinedeki örneği klasöre attık.

Daha sonra index.html dosyamızı açtık.

<script language="javascript" type="text/javascript">
jQuery(document).ready(function() {
$('#countdown_dashboard').countDown({
targetDate: {
'day': 10,
'month': 1,
'year': 2011,
'hour': 11,
'min': 0,
'sec': 0
}
});
$('#email_field').focus(email_focus).blur(email_blur);
$('#subscribe_form').bind('submit', function() { return false; });
});
</script>

bu kodları gördük aşağılarda bi yerde. burda kullanacağımız sadece $(‘#countdown_dashboard’) ile başlayan kısım o yüzden

$('#email_field').focus(email_focus).blur(email_blur);
$('#subscribe_form').bind('submit', function() { return false; });

kısmını silebilirsiniz.

 

Bizim hangi tarihe kadar geri sayım yapacağını önce bilmemiz gerekiyor tabi 🙂 Örneğin yarın sabah 7:00’a kadar sayım yapsın yani 02.09.2015 07:00 bu tarihimizin

gün kısımı ‘day’:2

ay kısmını ‘month’: 9

yıl kısmını ‘year’: 2015

saat kısmını ‘hour’: 07

dakika kısmını ‘min’: 0

saniye kısmını ‘sec’: 0

yapıyoruz galiba anladınız diye umut ediyorum.

 

Peki kısa süreli bi geri sayım yapacağız ve geri sayım bittikten sonra uyarı vereceğiz veya gizli bir divi aktif edeceğiz. Bunun için ise aşağıdaki kod yardımcı olacaktır.

<script language="javascript" type="text/javascript"></pre>
<pre>jQuery(document).ready(function() {
$('#countdown_dashboard').countDown({
targetOffset: {
'day': 		0,
'month': 	0,
'year': 	0,
'hour': 	0,
'min': 		0,
'sec': 		5
}, 
// onComplete function
onComplete: function() { $('#bilgi').show() } //gizli divi aktif etmek için
onComplete: function() { alert("geri sayım bitti"); } //bu ise uyarı için</pre>
<pre>}); });</pre>
<pre></script>