Question

我从here收集了一个不错的jQuery倒计时脚本。它不需要配置，但需要一个很好的开源项目。但我想设置的地方比较小，比如50％。所以，现在我想在宽度和高度上都做到50％。首先，我用photoshop打开了digits.png并将其设为50％，然后我打开了jquery.countdown.js，代码如下：

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: 67,
    digitHeight: 90,
    timerEnd: function(){},
    image: "digits.png",
    continuous: false
  };
  var digits = [], intervals = [];

  // 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_' + c + '" class="cntDigit" />').css({
          height: options.digitHeight,
          float: 'left',
          background: 'url(\'' + options.image + '\')',
          width: options.digitWidth
        });

        elem.current = parseInt(options.startTime[i]);
        digits.push(elem);

        margin(c, -elem.current * options.digitHeight * options.digitImages);

        if (options.continuous === true)
        {
          digits[c]._max = function(){ return 9; };
        }
        else
        {
          // 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 = function(pos, isStart) {
                if (pos % 2 == 0)
                  return 2;
                else
                  return (isStart) ? 3: 9;
              };
              break;
            case 'd':
              digits[c]._max = function(){ return 9; };
              break;
            case 'm':
            case 's':
              digits[c]._max = function(pos){ return (pos % 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)
    {
      digits[elem].margin = val;
      return digits[elem].css({'backgroundPosition': '0 ' + val + 'px'});
    }

    return digits[elem].margin || 0;
  };

  var makeMovement = function(elem, steps, isForward)
  {
    // Stop any other movement over the same digit.
    if (intervals[elem])
      window.clearInterval(intervals[elem]);

    // Move to the initial position (We force that because in chrome
    // there are some scenarios where digits lost sync)
    var initialPos = -(options.digitHeight * options.digitImages *
                       digits[elem].current);
    margin(elem, initialPos);
    digits[elem].current = digits[elem].current + ((isForward) ? steps: -steps);

    var x = 0;
    intervals[elem] = setInterval(function(){
      if (x++ === options.digitImages * steps)
      {
        window.clearInterval(intervals[elem]);
        delete intervals[elem];
        return;
      }

      var diff = isForward ? -options.digitHeight: options.digitHeight;
      margin(elem, initialPos + (x * diff));
    }, options.stepTime / steps);
  };

  // Makes the movement. This is done by "digitImages" steps.
  var moveDigit = function(elem)
  {
    if (digits[elem].current == 0)
    {
      // Is there still time left?
      if (elem > 0)
      {
        var isStart = (digits[elem - 1].current == 0);

        makeMovement(elem, digits[elem]._max(elem, isStart), true);
        moveDigit(elem - 1);
      }
      else // That condition means that we reach the end! 00:00.
      {
        for (var i = 0; i < digits.length; i++)
        {
          clearInterval(intervals[i]);
          clearInterval(intervals.main);
          margin(i, 0);
        }
        options.timerEnd();
      }

      return;
    }

    makeMovement(elem, 1);
  };

  $.extend(options, userOptions);
  createDigits(this);
  intervals.main = setInterval(function(){ moveDigit(digits.length - 1); },
                               1000);
};

我尝试将某些变量digitWidth: 67更改为digitWidth: 34，然后将digitHeight: 90更改为digitHeight: 45，但没有成功。我想让倒数计时器只比原来的一半。你能在代码的任何地方建议任何改变吗？

更新：这是digits.png，比原始版本高50％！

我还更改了#holder之类的相关div，但没有成功。

以下是计时器的当前情况。红色标记的地方是我的意思错位的问题。 This

Answer 1

你没有正确调整digits.png的大小 - 它太高了，所以digitHeight与你的图像不匹配。

查看具有50％高度的图像的演示（插件代码不变）：

http://jsfiddle.net/lhoeppner/RGyPQ/

请参阅图像参数部分：

 $('#counter').countdown({
    stepTime: 60,
    digitWidth: 34,
    digitHeight: 45,
    format: 'hh:mm:ss',
    startTime: "12:32:55",
    timerEnd: function () {
        alert('end!!');
    },
    image: "http://s21.postimg.org/nfgjv6b7r/digits2.png"
});

编辑jquery-countdown以适合我的HTML元素

1 个答案: