javascript - JavaScript：如何构建简单的百分比增加器？

Question

如何在没有进度条的情况下以百分比形式建立增加值。

0%我已经建立了一个动画师，但实际上我需要一个简单的动画师，它可以在100%没有进度条或任何东西的情况下显示价值。

这是我的代码：

$('.progress-bar').animate(
    {width:'83%'}, 
    {
        duration:2000,
        step: function(now, fx) {
            if(fx.prop == 'width') {
                $(this).html(Math.round(now * 100) / 100 + '%');
            }
        }
    }        
);

不仅需要进度<p></p>条

我知道这不是办法，我的 JavaScript 知识真的很低:(

示例小提琴

Answer 1

对于更新的问题

您可以使用间隔：

演示

var value = 0,
    interval = setInterval(function(){
    value = ((+value) + .1).toFixed(1);
    if(value == 80.5) clearInterval(interval);   
    $('p').html(value+'%');
},2);

第一篇文章

是你要找的吗？

演示

$('.progress-bar').animate(
    {width:'100%'}, 
    {
        duration:2000,
        step: function(now, fx) {
            if(fx.prop == 'width') {
                var newval = Math.round(now * 100) / 100 + '%';
                $([this,$(this).nextAll('p')[0]]).html(newval);
            }
        }
    }        
);

Answer 2

我已经更新了我的答案请检查这个

==================================================== ==='

进度条真的很酷。。

我用过这种类型的进度条..

请查看下面 的演示 可能会解决您的问题。

(function( $ ){
  $.fn.animateProgress = function(progress, callback) {
    return this.each(function() {
      $(this).animate({
        width: progress+'%'
      }, {
        duration: 2000,

        easing: 'swing',

        step: function( progress ){
          var labelEl = $('.ui-label', this),
              valueEl = $('.value', labelEl);

          if (Math.ceil(progress) < 20 && $('.ui-label', this).is(":visible")) {
            labelEl.hide();
          }else{
            if (labelEl.is(":hidden")) {
              labelEl.fadeIn();
            };
          }

          if (Math.ceil(progress) == 100) {
            labelEl.text('Done');
            setTimeout(function() {
              labelEl.fadeOut();
            }, 1000);
          }else{
            valueEl.text(Math.ceil(progress) + '%');
          }
        },
        complete: function(scope, i, elem) {
          if (callback) {
            callback.call(this, i, elem );
          };
        }
      });
    });
  };
})( jQuery );

$(function() {
  $('#progress_bar .ui-progress .ui-label').hide();
  $('#progress_bar .ui-progress').css('width', '7%');

  $('#progress_bar .ui-progress').animateProgress(43, function() {
    $(this).animateProgress(79, function() {
      setTimeout(function() {
        $('#progress_bar .ui-progress').animateProgress(100, function() {
          $('#main_content').slideDown();
        });
      }, 2000);
    });
  });

});