Geri Sayım Sayacı

by ibrahimay · Published 16 Aralık 2013 · Updated 23 Eylül 2022

Beklenen güne kaç gün kaç saat kaç dakika kaldı. Geri sayım sayacınızı kodlayın ve ziyaretçileriniz ile paylaşın.

Sitemize geri sayım sayacı eklemek için sadece JavaScript dilinden faydalanak isek güzel basit bir uygulama w3schools‘da mevcut, bakabilirsiniz. Buraya da ekleyeyim:

<script>
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2024 15:37:25").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();
    
  // Find the distance between now and the count down date
  var distance = countDownDate - now;
    
  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
  // Output the result in an element with id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";
    
  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);
</script>

// Set the date we're counting down to

var countDownDate = new Date("Jan 5, 2024 15:37:25").getTime();

// Update the count down every 1 second

var x = setInterval(function() {

// Get today's date and time

var now = new Date().getTime();

// Find the distance between now and the count down date

var distance = countDownDate - now;

// Time calculations for days, hours, minutes and seconds

var days = Math.floor(distance / (1000 * 60 * 60 * 24));

var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));

var seconds = Math.floor((distance % (1000 * 60)) / 1000);

// Output the result in an element with id="demo"

document.getElementById("demo").innerHTML = days + "d " + hours + "h "

+ minutes + "m " + seconds + "s ";

// If the count down is over, write some text

if (distance < 0) {

clearInterval(x);

document.getElementById("demo").innerHTML = "EXPIRED";

}

}, 1000);

</script>

Bu kodu siteye böylede ekleyebileceğiniz gibi <script></script> leri silip bir sayac.js dosyasına ekleyip ve aşağıdaki gibi sitenize ekleyebilirsiniz.

 <script src="sayac.js"></script>

1	<script src="sayac.js"></script>

Sayacın görünmesini istediğiniz yere de <p id=”demo”></p> eklemeniz yeter. <div id=”demo”></div> veya <a id=”demo”></a> gibi de olur, önemli olan id. #demo{} ile style vererek kullanılabilir. 21. satırdaki d ,h gibi yazılar gün saat vb türkçe kelimelerle değiştirilebilir. Sayaç örneğin 488 gün 22 saat 24 dakika 28 saniye yazarken eğer 0 dakika kaldıysa 488 gün 22 saat 0 dakika 28 saniye şeklinde yazar. Bunun yerine 488 gün 22 saat 28 saniye kaldı şeklinde olmasını isterseniz 18. satırdan sonra if(minutes <= 0) gibi bir koşul ile yazan kısmı gizleyebilecek şekilde kod ekleyebilirsiniz. Tabi diğer değişkenler içinde. Az sonra vereceğim örnekte yaptım, bakarız.

Malum, JavaScript istemci taraflı bir dildir ve bu sayaç kullanıcı bilgisayarındaki zamana göre işleyecektir. Ben ise sunucu taraflı bir uygulama istiyorum. JavaScript dilini sunucu taraflı kullanmak için hazırlanmış çeşitli projeler mevcut, internette araştırıp bulabilirsiniz. Ancak ben bu projelere bakmadım, bildiğim yoldan gidiyorum: PHP

Bildiğiniz gibi profesyonel bir kodlamacı değilim, işi bilenler yazım dilinden bunu anlarlar zaten. Onlar pieyçpi derler ben pehepe derim 😉 Bu sayfada daha önce sayaç paylaşımı yapmıştım. Sizinle yeni paylaşacağım koda göre o kodlar oldukça hantal geliyor artık. Ne amelelik yapmışım diyorum 🙂

Şimdi bu basit scripti sunucu taraflı yapmama engel olan “var now” ataması. Bu tanımı PHP ile yaptığımda setInterval yenilemesinde işlemiyor. Nasıl olur diye araştırma yaptığımda “işime yaramayan” şöyle kodlar veriliyor:

echo "<script>setInterval(function() {
    // Code runs after 1 second
}, 1000);
</script>";

echo "<script>setInterval(function() {

// Code runs after 1 second

}, 1000);

</script>";

Aklıma tarih ve saat uygulaması için yazdığımız kodlar geldi. Orada sunucu saatini kullanmıştık. Orada kullandığımız işleyiş ile w3schoolsda paylaşılan kodları sentezleyerek önceki yazdığıma göre daha basit bir kod yazabildim. Yazdığım kodlar için geri-sayim-sayaci adlı bir klasör açıp içinde index.php dosyası oluşturuyorum. index.php ye ekleyeceğim kodlar:

<?php
header("Content-type: text/javascript; charset=utf-8");
date_default_timezone_set('Europe/Istanbul');
setlocale(LC_TIME, 'tr_TR.UTF-8');
setlocale(LC_ALL,'turkish');
$hedefzaman="2023-09-09T04:55:00"; //standart iyidir - yıl 4 diğerleri 2 hane yıl-ay-gün-\saatdilimi saat:dakika:saniye
?>
//* ibrahimay.net *//
var simdi = '<?php echo floor(microtime(true)*1000); ?>';
var gelecek = new Date(<?php echo $hedefzaman; ?>).getTime();
var aradakifark = new Date(gelecek-simdi);
function sayacgoster()
{
  var days = Math.floor(aradakifark / (1000 * 60 * 60 * 24));
  var hours = Math.floor((aradakifark % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((aradakifark % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((aradakifark % (1000 * 60)) / 1000);
  aradakifark.setSeconds(aradakifark.getSeconds() - 1);
	  girismetni='<font class="onyazi"></font>';
	  metinsonu='<font class="sonyazi"></font>';
	  if(days <= 0){ gunyaz=''; } else {gunyaz='<font class="gun">' + days + '</font>';}
	  if(hours <= 0){ saatyaz=''; } else {saatyaz='<font class="saat">' + hours + '</font>';}
	  if(minutes <= 0){ dakikayaz=''; } else {dakikayaz='<font class="dakika">' + minutes + '</font>';}
	  if(seconds <= 0){ saniyeyaz=''; } else {saniyeyaz='<font class="saniye">' + seconds + '</font>';}
	  document.getElementById('dinamiksayac').innerHTML = girismetni + gunyaz + saatyaz + dakikayaz + saniyeyaz + metinsonu;
	  if (aradakifark < 0) {document.getElementById('dinamiksayac').innerHTML = '<font class="sayacdurdu"></font>'; clearInterval(sayacg);}
}
clearInterval(sayacg);
var sayacg= setInterval(sayacgoster, 1000);
document.getElementById('dinamiksayac').style.cssText += 'cursor:pointer';
document.getElementById('dinamiksayac').title = 'ibrahimay.net hizmetidir. İbrahim AY';
//* ibrahimay.net *//

<?php

header("Content-type: text/javascript; charset=utf-8");

date_default_timezone_set('Europe/Istanbul');

setlocale(LC_TIME, 'tr_TR.UTF-8');

setlocale(LC_ALL,'turkish');

$hedefzaman="2023-09-09T04:55:00"; //standart iyidir - yıl 4 diğerleri 2 hane yıl-ay-gün-\saatdilimi saat:dakika:saniye

//* ibrahimay.net *//

var simdi = '<?php echo floor(microtime(true)*1000); ?>';

var gelecek = new Date(<?php echo $hedefzaman; ?>).getTime();

var aradakifark = new Date(gelecek-simdi);

function sayacgoster()

{

var days = Math.floor(aradakifark / (1000 * 60 * 60 * 24));

var hours = Math.floor((aradakifark % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

var minutes = Math.floor((aradakifark % (1000 * 60 * 60)) / (1000 * 60));

var seconds = Math.floor((aradakifark % (1000 * 60)) / 1000);

aradakifark.setSeconds(aradakifark.getSeconds() - 1);

girismetni='<font class="onyazi"></font>';

metinsonu='<font class="sonyazi"></font>';

if(days <= 0){ gunyaz=''; } else {gunyaz='<font class="gun">' + days + '</font>';}

if(hours <= 0){ saatyaz=''; } else {saatyaz='<font class="saat">' + hours + '</font>';}

if(minutes <= 0){ dakikayaz=''; } else {dakikayaz='<font class="dakika">' + minutes + '</font>';}

if(seconds <= 0){ saniyeyaz=''; } else {saniyeyaz='<font class="saniye">' + seconds + '</font>';}

document.getElementById('dinamiksayac').innerHTML = girismetni + gunyaz + saatyaz + dakikayaz + saniyeyaz + metinsonu;

if (aradakifark < 0) {document.getElementById('dinamiksayac').innerHTML = '<font class="sayacdurdu"></font>'; clearInterval(sayacg);}

}

clearInterval(sayacg);

var sayacg= setInterval(sayacgoster, 1000);

document.getElementById('dinamiksayac').style.cssText += 'cursor:pointer';

document.getElementById('dinamiksayac').title = 'ibrahimay.net hizmetidir. İbrahim AY';

//* ibrahimay.net *//

Ekrana basmak istediğim yere de

<div id='dinamiksayac'></div>

1	<div id='dinamiksayac'></div>

eklediğimde 3649913 gibi son iki hanesi saniye olup geri sayan bir sayacım olur. Evet, dümdüz sayı, biliyorum. İyice özelleştirebilmek için böyle. Yukarıda gördüğünüz kodların görünümünü, yazılara verilmiş classlar ve style kodları ile yazılar dahil özelleştirebiliyorum. İşte bir örnek:

Yukarıdaki gösterimi sağlayan kodlar şöyle:

<style>
/* METİNLERİ AYARLAYINIZ BAŞLA */
.onyazi::after{content:"Sayacın dolmasına ";}
.sonyazi::after{content:" kaldı. ";}
.gun::after{content:" Gün ";vertical-align:sub;font-size:12px;color:gray;}
.saat::after{content:" Saat ";vertical-align:sub;font-size:12px;color:gray;}
.dakika::after{content:" Dakika ";vertical-align:sub;font-size:12px;color:gray;}
.saniye::after{content:" Saniye ";vertical-align:sub;font-size:12px;color:gray;}
.sayacdurdu::after{content:"Süre Doldu!";}
/* METİNLERİ AYARLAYINIZ BİTTİ */
/* SAYACIN GÖRÜNÜMÜNÜ AYARLAYINIZ BAŞLA */
#dinamiksayac {
text-align:center;
font-size:20px;
font-family:Georgia;
color:green;
text-decoration:none;
}
/* SAYACIN GÖRÜNÜMÜNÜ AYARLAYINIZ BİTTİ */
</style>
<div id='dinamiksayac'></div>
<script type='text/javascript' src='/geri-sayim-sayaci/index.php'></script>

<style>

/* METİNLERİ AYARLAYINIZ BAŞLA */

.onyazi::after{content:"Sayacın dolmasına ";}

.sonyazi::after{content:" kaldı. ";}

.gun::after{content:" Gün ";vertical-align:sub;font-size:12px;color:gray;}

.saat::after{content:" Saat ";vertical-align:sub;font-size:12px;color:gray;}

.dakika::after{content:" Dakika ";vertical-align:sub;font-size:12px;color:gray;}

.saniye::after{content:" Saniye ";vertical-align:sub;font-size:12px;color:gray;}

.sayacdurdu::after{content:"Süre Doldu!";}

/* METİNLERİ AYARLAYINIZ BİTTİ */

/* SAYACIN GÖRÜNÜMÜNÜ AYARLAYINIZ BAŞLA */

#dinamiksayac {

text-align:center;

font-size:20px;

font-family:Georgia;

color:green;

text-decoration:none;

}

/* SAYACIN GÖRÜNÜMÜNÜ AYARLAYINIZ BİTTİ */

</style>

Bunlara ek olarak sayacı bir video üstünde göstermekte mümkün. Bunun için konumlandırması relative olan bir div içine; konumlandırması absolute olan video iframesi ile dinamiksayac divini eklemek yeterli. dinamiksayac için yazdığımız style kodlarına ek olarak

#sayacvideo { 
position: relative;
width:400px;   height:250px;
}
#sayacvideo1 {
position: absolute;
opacity:0.5;
}

#sayacvideo {

position: relative;

width:400px; height:250px;

}

#sayacvideo1 {

position: absolute;

opacity:0.5;

}

kodlarını ekleyip aşağıdaki örnek kodlarla video üstü sayaç yapmış oluruz:

<div id='sayacvideo'>
<video id='sayacvideo1' autoplay controls loop>
<source src='/geri-sayim-sayaci/ornek.mp4' type='video/mp4'>İnternet tarayıcınız <code>video</code> etiketini desteklemiyor.</video>
<div id='dinamiksayac'></div>
</div>

<source src='/geri-sayim-sayaci/ornek.mp4' type='video/mp4'>İnternet tarayıcınız <code>video</code> etiketini desteklemiyor.</video>

</div>

<div id='sayacvideo'>
<iframe id='sayacvideo1' width='560' height='315' src='https://www.youtube.com/embed/DSfFPOqIPK8?rel=0&autoplay=1' frameborder='0' gesture='media' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'></iframe>
<div id='dinamiksayac'></div>
</div>

</div>

<div id='sayacvideo'>
<iframe id='sayacvideo1' frameborder='0' width='480' height='270' src='//dailymotion.com/embed/video/x1agmp4?autoPlay=1' allowfullscreen=''></iframe>
<div id='dinamiksayac'></div>
</div>

</div>

Değişik örnekler için demolar sayfama bakabilirsiniz.
Hazır dosyaları indirmek isterseniz :

Dosyalar üyelere özeldir: Giriş Yap
Yeni misin? Kayıt ol

Geri Sayım Sayacı

You may also like...

Bir yanıt yazın Yanıtı iptal et

Geri Sayım Sayacı

You may also like...

İftar-Sahur Sayacı ve Ezan Vakitleri

Tarihte Bugün / Today in History

Resimli Atatürk Sözleri

Bir yanıt yazın Yanıtı iptal et