Đếm lùi thời gian bằng đồng hồ countdown

Code đếm ngược thời gian và kích hoạt sự kiện bằng html + css + javascript (jquery). Trong đó js chiếm khá nhiều. Dung lượng tối thiểu cho tất cả code của hiệu ứng này là 33.4kb.

Đây là hiệu ứng hiện số theo phong cách chiếc đồng hồ kiểu công tơ mét ngày xưa. Thuật toán sử dụng 1 bức ảnh cực dài 53x4619 px. Trên đó lần lượt là các kiểu ảnh tương ứng với từng con số từ 0 đến 9, trong những trạng thái từ gần chớm đến quá hết. Chứ đây không phải là hiệu ứng đếm lùi theo kiểu số thông thường, do đó chúng ta sẽ có một đẹp mắt với nền đen.

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="jquery.countdown-original.js" type="text/javascript" charset="utf-8"></script>
<!--[if IE 8]>
<script src="jquery.countdown-second.js" type="text/javascript" charset="utf-8"></script>
<![endif]-->
<!--[if IE 7]>
<script src="jquery.countdown-second.js" type="text/javascript" charset="utf-8"></script>
<![endif]-->
    <script type="text/javascript">
      $(function(){
        $('#counter').countdown({
          image: 'digits.png',
          startTime: '01:12:12:00'
        });
        $('#counter_2').countdown({
          image: 'digits.png',
          startTime: '00:10',
          timerEnd: function(){alert("http://bendoi.vn");},
          format: 'mm:ss'
        });
      });
    </script>
    <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;}
    </style>
  <div id="counter"></div>
  <div class="desc">
    <div>Days</div>
    <div>Hours</div>
    <div>Minutes</div>
    <div>Seconds</div>
  </div>
  <br />
  <br />
  <br />
  <div id="counter_2"></div>
  <div class="desc">
    <div>Minutes</div>
    <div>seconds</div>
  </div>

Nội dung file jquery.countdown-second.js

/*
 * jquery-counter plugin
 *
 * Copyright (c) 2009 Martin Conte Mac Donell <Reflejo@gmail.com>
 * Dual licensed under the MIT and GPL licenses.
 *
 * http://docs.jquery.com/License
 *
 */
(function($){
jQuery.fn.countdown = function(userOptions) {
 // Default options
 var options = {
   stepTime: 60,
   // startTime and format MUST follow the same format.
   // also you cannot specify a format unordered (e.g. hh:ss:mm is wrong)
   format: "dd:hh:mm:ss",
   startTime: "01:12:32:55",
   digitImages: 6,
    digitWidth: 53,
    digitHeight: 77,
   timerEnd: function(){},
   image: "digits.png"
 };
 var digits = [], interval;
 // Draw digits in given container
 var createDigits = function(where) {
   var c = 0;
var tempStartTime = options.startTime = options.startTime.split('');
var tempFormat = options.format = options.format.split('');
   // Iterate each startTime digit, if it is not a digit
   // we'll asume that it's a separator
   for (var i = 0; i < tempStartTime.length; i++) {
     if (parseInt(tempStartTime[i], 10) >= 0) {
       elem = jQuery('<div/>').css({
         // height: options.digitHeight * options.digitImages * 10,
height: options.digitHeight,
         float: 'left',
background: 'url(\'' + options.image + '\') 0 0 no-repeat',
         width: options.digitWidth
}).addClass('cntDigit').attr('id', 'cnt_' + i);
       digits.push(elem);
       margin(c, -((parseInt(tempStartTime[i], 10) * options.digitHeight * options.digitImages)));
       digits[c].__max = 9;
       // Add max digits, for example, first digit of minutes (mm) has
       // a max of 5. Conditional max is used when the left digit has reach
       // the max. For example second "hours" digit has a conditional max of 4
       switch (tempFormat[i]) {
         case 'h':
           digits[c].__max = (c % 2 == 0) ? 2: 9;
           if (c % 2 == 0)
             digits[c].__condmax = 4;
           break;
         case 'd':
           digits[c].__max = 9;
           break;
         case 'm':
         case 's':
           digits[c].__max = (c % 2 == 0) ? 5: 9;
       }
       ++c;
     } else {
       elem = jQuery('<div class="cntSeparator"/>').css({
float: 'left'
}).text(tempStartTime[i]);
}
     where.append(
elem.wrap(
jQuery('<div/>').addClass("cnt-itemWrapper")
)
);
   }
 };
 
 // Set or get element margin
 var margin = function(elem, val) {
   if (val !== undefined) {
if(jQuery.browser.msie) {
return digits[elem].css({
// marginTop: val+ 'px'
'background-position-y': val + "px"
});
} else {
return digits[elem].css({
// marginTop: val+ 'px'
'backgroundPosition': "0px " + val + "px"
});
}
} else {
if (jQuery.browser.msie) {
var backgroundPos = digits[elem].css('background-position-y');
// alert(backgroundPos);
return parseInt(backgroundPos.replace('px', ''), 10);
} else {
var backgroundPos = digits[elem].css('backgroundPosition').split(' ');
return parseInt(backgroundPos[1].replace('px', ''), 10);
}
}
   // return parseInt(digits[elem].css('marginTop').replace('px', ''), 10);
 };
 // Makes the movement. This is done by "digitImages" steps.
 var moveStep = function(elem)
 {
   digits[elem]._digitInitial = - (digits[elem].__max * options.digitHeight * options.digitImages);
   return function _move() {
     mtop = margin(elem) + options.digitHeight;
     if (mtop == options.digitHeight) {
       margin(elem, digits[elem]._digitInitial);
       if (elem > 0) {
moveStep(elem - 1)();
} else {
         clearInterval(interval);
         for (var i=0; i < digits.length; i++) {
margin(i, 0);
}
         options.timerEnd();
         return;
       }
       if ((elem > 0) && (digits[elem].__condmax !== undefined) &&  (digits[elem - 1]._digitInitial == margin(elem - 1))) {
margin(elem, -(digits[elem].__condmax * options.digitHeight * options.digitImages));
}
       
       return;
     }
     margin(elem, mtop);
     if (margin(elem) / options.digitHeight % options.digitImages != 0) {
setTimeout(_move, options.stepTime);
}
     
     if (mtop == 0) {
digits[elem].__ismax = true;
}
   }
 };
 jQuery.extend(options, userOptions);
 this.css({height: options.digitHeight, overflow: 'hidden'});
 createDigits(this);
 interval = setInterval(moveStep(digits.length - 1), 1000);
};

})(jQuery);

Nội dung file jquery.countdown-original.js

/*
 * jquery-counter plugin
 *
 * Copyright (c) 2009 Martin Conte Mac Donell <Reflejo@gmail.com>
 * Dual licensed under the MIT and GPL licenses.
 * http://docs.jquery.com/License
 */
jQuery.fn.countdown = function(userOptions)
{
  // Default options
  var options = {
    stepTime: 60,
    // startTime and format MUST follow the same format.
    // also you cannot specify a format unordered (e.g. hh:ss:mm is wrong)
     format: "dd:hh:mm:ss",
   startTime: "01:12:32:55",
   digitImages: 6,
    digitWidth: 53,
    digitHeight: 77,
   timerEnd: function(){},
   image: "digits.png"
  };
  var digits = [], interval;
  // Draw digits in given container
  var createDigits = function(where)
  {
    var c = 0;
    // Iterate each startTime digit, if it is not a digit
    // we'll asume that it's a separator
    for (var i = 0; i < options.startTime.length; i++)
    {
      if (parseInt(options.startTime[i]) >= 0)
      {
        elem = $('<div id="cnt_' + i + '" class="cntDigit" />').css({
          height: options.digitHeight * options.digitImages * 10,
          float: 'left', background: 'url(\'' + options.image + '\')',
          width: options.digitWidth});
        digits.push(elem);
        margin(c, -((parseInt(options.startTime[i]) * options.digitHeight *
                              options.digitImages)));
        digits[c].__max = 9;
        // Add max digits, for example, first digit of minutes (mm) has
        // a max of 5. Conditional max is used when the left digit has reach
        // the max. For example second "hours" digit has a conditional max of 4
        switch (options.format[i]) {
          case 'h':
            digits[c].__max = (c % 2 == 0) ? 2: 9;
            if (c % 2 == 0)
              digits[c].__condmax = 4;
            break;
          case 'd':
            digits[c].__max = 9;
            break;
          case 'm':
          case 's':
            digits[c].__max = (c % 2 == 0) ? 5: 9;
        }
        ++c;
      }
      else
        elem = $('<div class="cntSeparator"/>').css({float: 'left'})
                .text(options.startTime[i]);
      where.append(elem)
    }
  };
 
  // Set or get element margin
  var margin = function(elem, val)
  {
    if (val !== undefined)
      return digits[elem].css({'marginTop': val + 'px'});
    return parseInt(digits[elem].css('marginTop').replace('px', ''));
  };
  // Makes the movement. This is done by "digitImages" steps.
  var moveStep = function(elem)
  {
    digits[elem]._digitInitial = -(digits[elem].__max * options.digitHeight * options.digitImages);
    return function _move() {
      mtop = margin(elem) + options.digitHeight;
      if (mtop == options.digitHeight) {
        margin(elem, digits[elem]._digitInitial);
        if (elem > 0) moveStep(elem - 1)();
        else
        {
          clearInterval(interval);
          for (var i=0; i < digits.length; i++) margin(i, 0);
          options.timerEnd();
          return;
        }
        if ((elem > 0) && (digits[elem].__condmax !== undefined) &&
            (digits[elem - 1]._digitInitial == margin(elem - 1)))
          margin(elem, -(digits[elem].__condmax * options.digitHeight * options.digitImages));
        return;
      }
      margin(elem, mtop);
      if (margin(elem) / options.digitHeight % options.digitImages != 0)
        setTimeout(_move, options.stepTime);
      if (mtop == 0) digits[elem].__ismax = true;
    }
  };
  $.extend(options, userOptions);
  this.css({height: options.digitHeight, overflow: 'hidden'});
  createDigits(this);
  interval = setInterval(moveStep(digits.length - 1), 1000);
};

Hình ảnh

Tìm kiếm trên mạng với từ khóa "digits.png", cái nào kích thước 53 × 4619 là chính nó.
Tôi đã sưu tầm một số ảnh trên những host khác nhau, với chút phong cách khác nhau cho bạn, bạn save về dùng

compile

- Giới thiệu: Thao trinh
- Tác giả code: Không rõ ! (Original author unknown)