jQuery HTML5 Android风格倒计时效果

2024-09-05 12:18:53

字体：大中小

来源：转载

供稿：网友

jQuery HTML5 Android风格倒计时效果，看着这种熟悉的效果，就像是记分牌一样，每变化一秒，记分牌就有变化，漂亮极了，倒计时也比较多，加上一个漂亮的外衣，还真有一番韵味。喜欢的就拷贝代码研究一下吧。

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery Android风格倒计时效果</title> <script src="http://www.vevb.com/ajaxjs/jquery1.3.2.js" type="text/javascript"></script><script type="text/javascript">jQuery.fn.countdown = function(userOptions){  var options = {    stepTime: 60,    format: "dd:hh:mm:ss",    startTime: "01:12:32:55",    digitImages: 6,    digitWidth: 53,    digitHeight: 77,    timerEnd: function(){},    image: "digits.png"  };  var digits = [], interval;  var createDigits = function(where)   {    var c = 0;    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;        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)    }  };  var margin = function(elem, val)   {    if (val !== undefined)      return digits[elem].css({'marginTop': val + 'px'});    return parseInt(digits[elem].css('marginTop').replace('px', ''));  };  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);};$(function(){     $('#counter').countdown({     image: '/jscss/demoimg/201309/digits.png',     startTime: '01:12:12:00'   });$('#counter_2').countdown({     image: '/jscss/demoimg/201309/digits.png',     startTime: '00:10',     timerEnd: function(){ alert('end!'); },     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></head><body>  <div id="counter"></div>  <div class="desc">    <div>Días</div>    <div>Horas</div>    <div>Minutos</div>    <div>Segundos</div>  </div>  <br />  <br />  <br />  <div id="counter_2"></div>  <div class="desc">    <div>Minutos</div>    <div>Segundos</div>  </div></body></html>

上一篇：CSS3实现动画旋转的风车

下一篇：HTML5 canvas颜色选择器