• címkék:
  • countdown
  • visszaszámlál
  • dátum
  • date
  • idő
  • time

CountDown

Példa: relatív és abszolút visszaszámlálás + metódusok használata

Hét
0
0
Nap
0
0
Óra
0
0
Perc
0
0
Másodperc
0
0

Abszolút visszaszámlálás (2011.12.31.-ig)

Abszolút visszaszámlálás + UTC (2011.12.31.-ig)

Relatív visszaszámlálás (10 perc)

Deklaráció

        $(document).ready(function(){
          $('#pelda-1').countDown({
            targetOffset: {
              year: 0,
              month: 0,
              day: 0,
              hour: 0,
              min: 0,
              sec: 0
            }
          });

          $('#dateAbsolute').click(function (){ 
            $('#pelda-1').stopCountDown();
            $('#pelda-1').setCountDown({
              targetDate: {
                year: 2011,
                month: 12,
                day: 31,
                hour: 23,
                min: 59,
                sec: 59
              }
            });
            $('#pelda-1').startCountDown();
          });

          $('#dateAbsoluteUTC').click(function (){ 
            $('#pelda-1').stopCountDown();
            $('#pelda-1').setCountDown({
              targetDate: {
                year: 2011,
                month: 12,
                day: 31,
                hour: 23,
                min: 59,
                sec: 59,
                utc: true
              }
            });
            $('#pelda-1').startCountDown();
          });

          $('#dateRelative').click(function (){ 
            $('#pelda-1').stopCountDown();
            $('#pelda-1').setCountDown({
              targetOffset: {
                year: 0,
                month: 0,
                day: 0,
                hour: 0,
                min: 10,
                sec: 0
              }
            });
            $('#pelda-1').startCountDown();
          });
        });
      

HTML kód

        <div id="pelda-1">
          <div class="dash weeks_dash">
            <span class="dash_title">Hét</span>
            <div class="digit">0</div>
            <div class="digit">0</div>
          </div>
          <div class="dash days_dash">
            <span class="dash_title">Nap</span>
            <div class="digit">0</div>
            <div class="digit">0</div>
          </div>
          <div class="dash hours_dash">
            <span class="dash_title">Óra</span>
            <div class="digit">0</div>
            <div class="digit">0</div>
          </div>
          <div class="dash minutes_dash">
            <span class="dash_title">Perc</span>
            <div class="digit">0</div>
            <div class="digit">0</div>
          </div>
          <div class="dash seconds_dash">
            <span class="dash_title">Másodperc</span>
            <div class="digit">0</div>
            <div class="digit">0</div>
          </div>
        </div>
        <p>
          <span class="customLink" id="dateAbsolute" >Abszolút visszaszámlálás</span> (<i>2011.12.31.-ig</i>)
        </p>
        <p>
          <span class="customLink" id="dateAbsoluteUTC" >Abszolút visszaszámlálás + UTC</span> (<i>2011.12.31.-ig</i>)
        </p>
        <p>
          <span class="customLink" id="dateRelative" >Relatív visszaszámlálás</span> (<i>10 perc</i>)
        </p>
      

Példa: onComplete() függvény használata

Másodperc
0
0

Újra!

Deklaráció

        $(document).ready(function(){
          $('#pelda-2').countDown({
            targetOffset: {
              year: 0,
              month: 0,
              day: 0,
              hour: 0,
              min: 0,
              sec: 5
            },
            onComplete: function(){
              $('#dateReset').fadeIn();
            }
          });

          $('#dateReset').hide();

          $('#dateReset').click(function (){
            $(this).fadeOut();
            $('#pelda-2').stopCountDown();
            $('#pelda-2').setCountDown({
              targetOffset: {
                year: 0,
                month: 0,
                day: 0,
                hour: 0,
                min: 0,
                sec: 5
              }
            });
            $('#pelda-2').startCountDown();
          });
        });
      

HTML kód

        <div id="pelda-2">
          <div class="dash seconds_dash">
            <span class="dash_title">Másodperc</span>
            <div class="digit">0</div>
            <div class="digit">0</div>
          </div>
        </div>
        <p>
          <span class="customLink" id="dateReset" >Újra!</span>
        </p>
      

« bezár