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

254Okunma
1 Yorum

Geriye 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ı <div id=”counter”></div> divleri arasında gösterilir ve saat sayımı da <div id=”counter_2″></div> 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>

 

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2020-09-27 tarihinde yayınlandı,Toplam 2169 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(1 Yorum)
Yükleniyor...
hakan Yorumcu LV.1
2015-12-17 10:06:09 回 Yanıtla

saniyeler demoda biraz hızlı ilerlemiyor mu sizce?