Geriye doğru sayan sayım sayacı – CountDown

By

CountDown
Bir aralar siteyi bakıma aldığımızda ziyaretçilere ne zaman sitenin açılacağı konusunda bilgi vermek amaçlı ücretsiz  geri sayım sayaçlarını aradım sizler için. WordPress için en iyi olanlarının büyük çoğunluğu ücretli olanlardı. Ücretsiz olanları da beklentilerimizi karşılayacak türden değildi açıkçası.  Manuel olarak sitenize geri sayım sayacı eklemek isterseniz eğer CountDown.js kolay kullanımı sayesinde tam aradığınız bir uygulamadır diyebilirim. Hem saat olarak hem de gün olarak belirlenebilir.

Geriye doğru sayılacak zamanı belirlemek için yapmanız gereken tek şey Javascript kodlar içinde bir tarih veya saat belirlemek. Daha sonra da body etiketleri arasına kullanmak istediğiniz sayacın divlerini eklemek olacak. Gün sayımı 

divleri arasında gösterilir ve saat sayımı da 

divleri arasında gösterilir. Yapmanız gereken işte bu kadar basittir. Kendinize  göre tasarımını da kolaylıkla değiştirebilirsiniz.

Kullanım

  • Head etiketleri arasına eklenmesi gereken bölümler.

Js dosya adresleri : 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.countdown.js" type="text/javascript" charset="utf-8"></script>

 Javascript : 
    <script type="text/javascript">
      $(function(){
        $('#counter').countdown({
          image: 'img/digits.png',
          startTime: '01:12:12:00'
        });

        $('#counter_2').countdown({
          image: 'img/digits.png',
          startTime: '01:00',
          timerEnd: function(){ alert('end!'); },
          format: 'mm:ss'
        });
      });
    </script>

 Stil : 
   <style type="text/css">
      br { clear: both; }
      .cntSeparator {
        font-size: 54px;
        margin: 10px 7px;
        color: #000;
      }
      .desc { margin: 7px 3px; }
      .desc div {
        float: left;
        font-family: Arial;
        width: 70px;
        margin-right: 65px;
        font-size: 13px;
        font-weight: bold;
        color: #000;
      }
        .genelcer {
        width: 520px;
        height: auto;
        display: block;
        margin: 0 auto;
            text-align: center;
        }
        .ust {
        width: 550px;
        height: 120px;
        margin: 1%;
        display: block;   
        }
        .alt {
        width: 285px;
        height: 120px;
        margin: 0 auto;
        display: block;      
        }

    </style>

Body etiketleri arasına eklemeniz gereken bölüm.

Html :

<div class="genelcer">
    <h1>jQuery CountDown Plugin</h1>
<div class="ust">
  <div id="counter"></div>
  <div class="desc">
    <div>Gun</div>
    <div>Saat</div>
    <div>Dakika</div>
    <div>Saniye</div>
  </div>
</div>
<div class="alt">    
  <div id="counter_2"></div>
  <div class="desc">
    <div>Dakika</div>
    <div>Saniye</div>
  </div>
</div>    
</div>

 



1 Comment
  1. hakan 5 years ago
    Reply

    saniyeler demoda biraz hızlı ilerlemiyor mu sizce?

Leave a Comment

Your email address will not be published.

You may also like

Trend