setInterval计时器需要动画进度条上的偏移量

时间:2012-09-08 22:37:44

标签: javascript jquery

我有一个脚本:

http://jsfiddle.net/bXJhe/7/

jQuery(document).ready(function() {

    timer(10)

});

// Timer
var GLOBAL_TIMER;

function timer(intCount) {
    GLOBAL_TIMER = setInterval(function() {

        var intTickLength = 10;

        if (intCount < 10) {
            jQuery('#timer').html('00:0' + intCount--);
            jQuery('#bar').css('width', intCount * intTickLength + 'px');
        } else {
            jQuery('#timer').html('00:' + intCount--);
            jQuery('#bar').css('width', intCount * intTickLength + 'px');
        }

        if (intCount < 0) {
          stopTimer();
        }

    }, 1000);
}

function stopTimer() {
    clearInterval(GLOBAL_TIMER);
}​

我根据intCount * intTickLength制作进度条的宽度(可能还有更好的方法吗?)

问题是,当计数器达到1时,条形图上的最后一个勾号消失。我需要它保持到计数器达到0.我需要某种偏移..任何想法?我不是专家,但我渴望成为一名。

1 个答案:

答案 0 :(得分:4)

在递减计数器之前设置条形尺寸:

jQuery('#bar').css('width', intCount * intTickLength + 'px');
jQuery('#timer').html('00:0' + intCount--);