Javascript 动态进度条

我需要编码一个进度条，它有一些自定义的最大宽度值和自定义进度。我发现了一些与的相关的东西，但是它缺少一些功能

HTML:

<div class="meter">
  <span style="width:502px"></span>
  <p></p>
</div>

脚本：

    $(function(){
        var bar = $('span');
var p = $('p');


var width = "bar.attr('style')";
width = width.replace("width:", "");
width = width.substr(0, width.length-1);


var interval;
var start = 0; 
var end = parseInt(width);
var current = start;

var countUp = function() {
  current++;
  p.html(current + "%");

  if (current === end) {
    clearInterval(interval);
  }
};

interval = setInterval(countUp, (1000 / (end + 1)));

    });

拨弄

进度条的最大宽度应该是可自定义的，例如10000

---

你的进步是5000。最大值应为脚本上插入的任何数字。如果是这样的话，它也会显示条除以4的等分。如下图所示

看起来它已经开始工作了。你所要做的就是计算条的宽度，比如说，我们使用10000（作为条的宽度）：

从0开始，然后显示2500（10000/4），然后显示7500，最后显示10000

至于进度条本身，只需在更新时显示数字即可

--

---

另外，您可能应该使用%作为进度条，因为如果您使用10000作为宽度，它将占用比屏幕大小更多的时间。

基于您的代码，我尝试生成一个动态进度条。你可以在这里看到结果

我做了以下几件事：

• 我在进度条周围创建了一个包装器，其中包含进度条的特定宽度
• 我将进度条的宽度设置为100%，如果我们有一个从0到100的比例，那么设置进度条的宽度就更容易了
• 我添加了jQuery动画效果，而不是在CSS中使用关键帧
• 我根据进度条本身的大小设置进度条下方的文本和文本位置

您唯一想更改的是：

var end = 75; // Were this value is the position were the bar ends

以及：

如果你有任何问题，请告诉我

HTML

<div class="wrapper">
    <div class="meter">
      <span></span>
      <p></p>
    </div>
    <div class="ticks">        
        <span class="first"></span>
        <span class="second"></span>
        <span class="third"></span>       
    </div>
</div>

.wrapper{width:800px;}

<div class="wrapper">
    <div class="meter">
      <span></span>
      <p></p>
    </div>
    <div class="ticks">        
        <span class="first"></span>
        <span class="second"></span>
        <span class="third"></span>       
    </div>
</div>

$(function(){
    var bar = $('span');
    var p = $('p');

    var width = $(".wrapper").width(); // the width of the wrapper can be set via CSS


    var interval;
    var start = 0; 
    var end = 75; //Percentage were the bar must end (value from 0 to 100)
    var current = start;

    var calculate_percentage = (width / 100) * end

    var countUp = function() {
      current++;
       $('div.meter span').animate({width:end+"%"},11000); // Animation of the progress bar
       p.html(current + "px");

      if (current === calculate_percentage) {
        clearInterval(interval);
      }
    };

    interval = setInterval(countUp, (500 / (end + 1)));
    var first = width / 4;
    var second = first * 2;
    var third = first * 3;
    $(".first").append(first + "px");
    $(".first").css("left", first+"px");
    $(".second").append(second + "px");
    $(".second").css("left", second+"px");
    $(".third").append(third + "px");
    $(".third").css("left", third+"px");    

});